时间戳

首页 > 解决方案 > 位置：固定在移动设备上无法正常工作

javascript - 位置：固定在移动设备上无法正常工作

问题描述

我尝试从 w3school 克隆一个网站。这是我的问题：

位置：固定在我使用电脑时正常工作。但是当我使用移动设备并向下滚动网站时，它无法正常工作（标题的高度比平时小）。为什么它不能正常工作，我该如何解决？

模板网站

var menuElement = document.querySelector('.menu_item');
var headerElement = document.querySelector('.header');
var navItemElements = document.querySelectorAll('.header .nav .nav__item');
var oriHeight = headerElement.style.height;
//lay ra height cua header element
menuElement.onclick = function(){
    var curHeight = headerElement.style.height;
    if(oriHeight == curHeight){
        headerElement.style.height = 'auto';
    }
    else{
        headerElement.style.height = `${oriHeight}`;
    }
}
navItemElements.forEach(function(element){
    element.onclick = function(){
        headerElement.style.height = `${oriHeight}`;
    }
})
/*reset CSS*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
    font-family: Arial, Helvetica, sans-serif;
}
.white-text{
    color: white !important;
}
.clear{
    clear: both;
}
.row{
    padding: 32px 0px;
}
.col{
    float: left;
}
.col-all{
    width: 100%;
}
.col-half{
    width: 50%;
}
.pl-8{
    padding-left: 8px;
}
.pr-8{
    padding-right: 8px;
}
.pb-8{
    padding-bottom: 8px;
}
.full{
    width: 100%;
}
.main{
    width: 100vw;
}
.header{
    overflow: hidden;
    max-width: 100vw;
    height: 46.4px;
    background-color: black;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
}
.header>.nav{
    display: inline-block;
    
}
.header>.nav>.nav__item>a{
    display: block;
    color: white;
    text-decoration: none;
    line-height: 46.4px;
    padding: 0px 24px;
    text-transform: uppercase;
}
.header>.nav>.nav__item{
    display: inline-block;/*để menu cùng hàng*/
    height: 100%;
}
.header>.nav .sub_nav{
    display: none;
}
.header>.nav .sub_nav{
    list-style-type: none;
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    background-color: white;
}
.header>.nav .sub_nav a{
    text-decoration: none;
    color: black;
    display: block;
    padding: 8px 16px;

}
.header>.nav li:hover>a{
    color: black !important;
    background-color: #ccc;
}
.header>.nav li:hover>.sub_nav{
    display: block;
}
/* search item */
/* c1 */
/* .header>.search__item{
    display: inline-block; 
} */
/*c2*/
.header>.search__item{
    float: right;
}
/* c1 */
/* .header .search-icon{
    color: white;
    font-size: 14px;
    padding: 0 21px;
    margin-left: 178px;
    padding:16px 24px;
    cursor: pointer;
} */
/*cursor trong css nó tự động hiểu
là nếu .search-icon được hover
thì mới hiện. nên có thể để ở đây*/

.header .search-icon{/*c2*/
    color: white;
    font-size: 14px;
    padding: 0 21px;
    line-height: 46.4px;
}
.header .search-icon:hover{
    background-color: #f44336;
    cursor: pointer;
}
/* end search item */
/* menu item */
.header .menu_item{
    display: none;
    color: white;
    float: right;
    font-size: 14px;
    padding: 0 21px;
    line-height: 46.4px;
}
.header .menu_item:hover{
    color: black;
    background-color: #ccc;
}
.slider{
    /*Do phần header set là position: fixed
    nên bị out of flow. nên phần slider sẽ bị
    đẩy lên trên.
    do đó phải thêm margin để đẩy slider xuống
    */
    margin-top: 46.4px;
    background: url(/assets/img/la.jpg) center center /cover no-repeat;
    width: 100%;
    padding-top: 50%;
    position: relative;
    z-index: -1;
}
.slider>.text_block{
    position: absolute;
    bottom: 32px;

    /* width: 100%; 
    or:*/
    left: 0px;
    right: 0px;

    text-align: center;
    color: white;
}
.sub_text{
    margin-top: 25px;
}
.content{
    background-color: white;
}
.content .container-section{
    width: 800px;
    max-width: 100%;
    padding: 64px 16px;
    margin: auto auto;
}
.content .text{
    text-align: justify;
    margin-top: 15px;
    margin-bottom: 15px;
}
.content .heading-section{
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: lighter;
    letter-spacing: 4px;
}
.content .sub-heading-section{
    margin-top: 15px;
    margin-bottom: 15px;
    text-align: center;
    font-style: italic;
    opacity: 0.4;
}
.content .image_block{
    display: flex;
    justify-content: space-around;
    padding: 32px 0;
}
.image_block .img_item{
    width: 154px;
}
.image_block .name{
    text-align: center;
    margin:15px 0;
}
.tour-section{
    background-color: black;
}
.ticket-block{
    margin-top: 35px;
    
}
.ticket-list{
    background-color: white;
}
.ticket-item{
    padding: 8px 16px;
    font-size: 15px;
}
.status_sold-out{
    margin-left: 16px;
    padding: 2px 8px;
    background-color: #f44336;
}
.status_number{
    width: 24px;
    height: 24px;
    float: right;
    background-color: black;
    padding: 0px 8px;
    border-radius: 50%;
    line-height: 24px;
    text-align: center;
    margin-top: -3.5px;
}
.ticket-item p{
    color: #757575;
}
/*place
c1: dung float
se xay ra van de, co the giai quyet bang cach
-cho thuoc tinh overflow: hidden vao block chua
cac item co thuoc tinh float
-dat 1 div co thuoc tinh clear: both vao cuoi
block cua cac item co thuoc tinh float*/
.place-list{
    overflow: hidden;
    margin: 32px -8px 64px;
    
}
.place-item{
    float: left;
    width: 33.3333%;
    padding: 0px 8px;
}
.place-list .img-item{
    width: 100%;
    /*the img co display mac dinh la inline 
    nen co khoang trang giua cac dong
    --> chuyen sang display: block*/
    display: block;
}
.place-list .img-item:hover{
    opacity: 0.6;
}
.place-list .place-body{
    background-color: white;
    padding: 15px 16px 16px;
}
.place-list .place-heading{
    font-weight: 550;

}
.place-list .day{
    margin: 15px 0px;
    color: #757575;
}
.place-list .place-text{
    margin: 15px 0px;
}
.place-list .buy-ticket-btn{
    background-color: black;
    list-style: none;
    text-decoration: none;
    color: white;
    padding: 8px 16px;
    /*do the a co tinh chat la text
    nen phan padding se che di khac phan khac
    nen de la inline-block
    nhung nhuoc diem cua cach khac phuc nay la co 1
    khoang ho nho?*/
    display: inline-block;
    
}
.place-list .buy-ticket-btn:hover{
    color: black !important;
    background-color: #ccc !important;
}

/*contact*/
.contact-inf{
    font-size: 18px;
    line-height: 27px;
}
.contact-section i[class*="fas"]{
    width: 30px;
}
.contact-section .form-control{
    padding: 8px 8px;

}
.contact-section .send-btn
{
    float: right;
    padding: 9px 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    color: white;
    background-color: black;
    border: none;
}
.contact-section .send-btn:hover{
    cursor: pointer;
    color: #333;
    background-color: #ccc;
}
.footer .content{
    text-align: center;
    padding: 64px 0px;
}
.footer .social-list{
    list-style: none;
}
.footer .social-item{
    display: inline-block;
    font-size: 24px;
    color: gray;
}
.footer .social-item:hover{
    opacity: 0.6;
}
.footer .copyright{
    margin-top: 15px;
    color: gray;
}
.footer .copyright a{
    color: gray;
}
.footer img{
    width: 100%;
    filter: grayscale(50%);
    z-index: -1;
}

/* responsive */
/* pc */
@media(max-width: 1024px){

}
/* tablet */
@media(min-width: 740px) and(max-width: 1023px){
    
}
/* mobile */
@media(max-width: 739px){
    .header>.nav>.nav__item{
        display: block;
    }
    .header>.search__item{
        display: none;
    }
    .header .menu_item{
        display: block;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The band</title>
    <link rel="icon" href="data:image/png;base64,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" type="image/gif" sizes="20x20">
    <link rel="stylesheet" href="assets/font/awsome-icons/css/all.css">
    <link rel="stylesheet" href="assets/main.css">
    <link rel="stylesheet" href="/responsive.css">
</head>

<body>
    <div class="main">
        <div class="header">
            <ul class="nav">
                <li class="nav__item"><a href="#">Home</a></li>
                <li class="nav__item"><a href="#band">Band</a></li>
                <li class="nav__item"><a href="#tour">Tour</a></li>
                <li class="nav__item"><a href="#contact">Contact</a></li>
                <li class="nav__item">
                    <a href="#">
                        More
                        <i class="fas fa-caret-down"></i>
                    </a>
                    <ul class="sub_nav">
                        <li><a href="#">Merchandise</a></li>
                        <li><a href="#">Extras</a></li>
                        <li><a href="#">Media</a></li>
                    </ul>
                </li>
            </ul>
            <div class="search__item">
                <i class="search-icon fas fa-search"></i>
            </div>
            <div class="menu_item">
                <i class="fas fa-bars"></i>
            </div>
        </div>

        <div class="slider">
            <div class="text_block">
                <p style="font-size: 25px">Los Angeles</p>
                <p class="sub_text">We had the best time playing at Venice Beach!</p>
            </div>
        </div>

        <div id = "band" class="content">
            <div class="container-section">
                <h2 class="heading-section">THE BAND</h2>
                <p class="sub-heading-section">We love music</p>
                <p class="text">
                    We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
                    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
                    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat.
                </p>
                <div class="image_block">
                    <div>
                        <p class="name">Name</p>
                        <img src="/assets/img/bandmember.jpg" alt="Name" class="img_item">
                    </div>
                    <div>
                        <p class="name">Name</p>
                        <img src="/assets/img/bandmember.jpg" alt="Name" class="img_item">
                    </div>
                    <div>
                        <p class="name">Name</p>
                        <img src="/assets/img/bandmember.jpg" alt="Name" class="img_item">
                    </div>
                </div>
            </div>

            <div id = "tour" class="tour-section">
                <div class="container-section">
                    <h2 class="heading-section white-text">TOUR DATES</h2>
                    <p class="sub-heading-section white-text">Remember to book your tickets!</p>
                    <div class="ticket-block">
                        <ul class="ticket-list">
                            <li class="ticket-item">
                                <p>September<span class="status_sold-out white-text">Sold out</span></p>
                            </li>
                            <li class="ticket-item">
                                <p>October<span class="status_sold-out white-text">Sold out</span></p>
                            </li>
                            <li class="ticket-item">
                                <p>November<span class="status_number white-text">3</span></p>
                            </li>
                        </ul>
                    </div>

                    <!-- place -->
                    <div class="place-list">
                        <div class="place-item">
                            <img src="/assets/img/place1.jpg" alt="New York" class="img-item">
                            <div class="place-body">
                                <h4 class="place-heading">New York</h4>
                                <p class="day">Fri 27 Nov 2016</p>
                                <p class="place-text">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
                                <a href="#" class="buy-ticket-btn">Buy Tickets</a>
                            </div>
                        </div>
                        <div class="place-item">
                            <img src="/assets/img/place2.jpg" alt="Paris" class="img-item">
                            <div class="place-body">
                                <h4 class="place-heading">Paris</h4>
                                <p class="day">Sat 28 Nov 2016</p>
                                <p class="place-text">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
                                <a href="#" class="buy-ticket-btn">Buy Tickets</a>
                            </div>
                        </div>
                        <div class="place-item">
                            <img src="/assets/img/place3.jpg" alt="San Francisco" class="img-item">
                            <div class="place-body">
                                <h4 class="place-heading">San Francisco</h4>
                                <p class="day">Sun 29 Nov 2016</p>
                                <p class="place-text">Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
                                <a href="#" class="buy-ticket-btn">Buy Tickets</a>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>


            </div>

            <div id = "contact" class="contact-section container-section">
                <h2 class="heading-section" style = "font-size: 30px">CONTACT</h2>
                <p class="sub-heading-section">Fan? Drop a note!</p>
                <div class="row contact-inf">
                    <div class="col col-half">
                        <p><i class="fas fa-map-marker-alt"></i>Chicago, US</p>
                        <p><i class="fas fa-phone-alt"></i>Phone: +00 151515</p>
                        <p><i class="fas fa-envelope"></i>Email: mail@mail.com</p>
                    </div>
                    <form action="">
                        <div class="col col-half">
                            <div class="col col-half pr-8 pb-8">
                                <input class=" form-control full" type="text" placeholder="Name" required>
                            </div>
                            <div class="col col-half pl-8">
                                <input class=" form-control full" type="email" placeholder="Email" required>
                            </div>
                            <div class="col col-all">
                                <input class="form-control full" type="text" placeholder="Message" required>
                            </div>
                            <input class = "send-btn" type="submit" value = "Send">
                            
                        </div>
                    </form>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="footer">
                <img src="./assets/img/map.jpg" alt="">
                <div class="content">
                    <div class="social-list">
                        <li class="social-item"><i class="fab fa-facebook-square"></i></li>
                        <li class="social-item"><i class="fab fa-instagram"></i></li>
                        <li class="social-item"><i class="fab fa-snapchat-square"></i></li>
                        <li class="social-item"><i class="fab fa-pinterest-p"></i></li>
                        <li class="social-item"><i class="fab fa-twitter"></i></li>
                        <li class="social-item"><i class="fab fa-linkedin-in"></i></li>
                    </div>
                    <div class = "copyright">Powered by <a href="#">w3.css</a></div>
                </div>
            </div>
        </div>

        
    </div>
    <script src ="script.js"></script>
</body>

</html>

标签： javascripthtmlcss

解决方案

推荐阅读