Question

我正在设计一个网页，页面顶部有两个div。我希望当我滚动格式超过50px时，第二个div移动到页面顶部并固定，以便页面的其余部分滚动在它下面。这是我到目前为止，欢迎任何帮助。

$(document).ready(function() {
$(window).scroll(function() {
    if($(window).scrollTop() > 50) {    
        $('#navigation').css("position", "fixed");
    }
    else{
        if($(window).scrollTop() < 50) {     
    $('#navigation').css("position", "none")
    }
    }
});

}）;

CSS
#page-header
{ height:120px;
background:none;
border:1px solid #000; position: }

#navigation
{ width:100%;
height:60px;
border:1px solid #f00; }

HTML
<div id="page-header" >
            <div id="toggle-menu"><a class="toggle-nav" href="#">&#9776;&nbsp;<span>MENU</span></a></div>
                <div id="search-page"><a href="#"><h1>SEARCH</h1></a></div>
            <div id="login-page"><a href="#"><h1>LOGIN</h1></a></div>


       <div id="navigation" class="fixed_header">
            <div id="caption"><h1>Sophiscated web</h1></div>
                <div id="menu">
                        <ul id="nav">
                            <li class="current-item"><a href="#">Home</a></li>
                            <li><a href="#">Product</a></li>
                            <li><a href="#">Service</a></li>
                            <li><a href="#">Support</a></li> 
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">About</a></li>
                        </ul>  
                </div><!-- menu Ends Here -->

Answer 1

您需要设置最高值以及

之类的位置

$(window).scroll(function () {
  $('#navigation').toggleClass("fixed", $(window).scrollTop() > 50);
});

#page-header {
    height:120px;
    background:none;
    border:1px solid #000;
    position:
}
#navigation {
    width:100%;
    height:60px;
    border:1px solid #f00;
}
#navigation.fixed {
    position: fixed;
    top: 0;
}

body{min-height: 800px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page-header" >
    <div id="toggle-menu"><a class="toggle-nav" href="#">&#9776;&nbsp;<span>MENU</span></a></div>
    <div id="search-page"><a href="#"><h1>SEARCH</h1></a></div>
    <div id="login-page"><a href="#"><h1>LOGIN</h1></a></div>


    <div id="navigation" class="fixed_header">
        <div id="caption"><h1>Sophiscated web</h1></div>
        <div id="menu">
            <ul id="nav">
                <li class="current-item"><a href="#">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Support</a></li> 
                <li><a href="#">Contact</a></li>
                <li><a href="#">About</a></li>
            </ul>  
        </div><!-- menu Ends Here -->

Answer 2

你几乎就在那里，我会根据是否达到所需的滚动位置来添加一个类：

$(window).scroll(function () {
  // This adds the class 'sticky' to the #navigation div if 
  // $(window).scrollTop() > 50 is true
  $('#navigation').toggleClass('sticky', $(window).scrollTop() > 50);
});

但是，我会通过不加硬编码50来改进这一点，我会动态地从页面顶部获取标题的偏移量并使用它代替：

var headerOffset = $('#caption').offset().top;

$(window).scroll(function () {
  $('#navigation').toggleClass('sticky', $(window).scrollTop() > headerOffset);
});

这是一个JSFiddle：https://jsfiddle.net/w58omkga/

正确使用if / else语句与windows滚动的方法

2 个答案: