Question

我有一个包含2个导航栏的页面。第一个固定在页面顶部。第二个，在页面中间，变得＆＃34;顶部粘＆＃34;当我滚动。

我想在到达第二个之前停止第一个导航栏。因此，当您在第二个导航栏之后滚动时，只有这个可见，第一个保持在上面/消失。

我的HTML：

<body>
<div id="page"> 
  <div class="fullscreen">
    <h1>Zone fullscreen</h1>
    </div>
  <header class="navbar1">
    <p>Navbar 1 : I am fixed but I want to stop just before Navbar2 !</p>
  </header> 
  <div id="content">
    <div class="navbar2">
     <p>Navbar 2 : I become sticky on scroll</p>
    </div><!--/navbarLoc-->
  <div class="main-content">
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  </div><!--/content -->
</div><!--/page-->
</body>

CSS：

* {padding:0; margin:0;}
html, body, #page {height:100%;}

.fullscreen {height: 100%;background: red;position:relative; z-index:5;}
.fullscreen h1 {padding-top:180px;text-align:center;}

.navbar1 {position: fixed; left: 0; right: 0; top:10px;background:yellow;padding:5px;z-index:15;}
.navbar2 {background:green;padding:5px;z-index:20;}

.main-content {padding:10px;position:relative; z-index:10;}
.main-content p {font-size:50px;}

和JS：

这是为了让Navbar2变得粘性：

$(".navbar2").stick_in_parent({offset_top:40});

我发现这段代码，使navbar1在到达Navbar2时绝对无效：

function checkOffset() {
    if($('.navbar1').offset().top + $('.navbar1').height() >=     $('.navbar2').offset().top - 10)
        $('.navbar1').css('position', 'absolute');
    if($(document).scrollTop() + window.innerHeight <    $('.navbar2').offset().top)
    $('.navbar1').css('position', 'fixed'); // restore when you scroll up
    $('.navbar1').text($(document).scrollTop() + window.innerHeight);
}
$(document).scroll(function() {
    checkOffset();
});

也许最好的解决方案是添加/删除一个类而不是直接应用CSS？

有什么想法吗？

预先感谢您的回复！

Answer 1

好的，首先我有一些笔记，我想与你分享

我不确定你为什么要使用navbar1的标题，所以我把它更新为div
你使用太多无用的CSS，不需要所有这些显示，位置和z-index属性，所以我删除了不必要的样式

请检查下面的代码，它应该做你需要的。

$(document).ready(function(){
  $(".navbar1").addClass("fixedbar");
  $(".navbar2").removeClass("fixedbar");
  
  var bar2pos=$('.navbar2').offset().top - $('.navbar2').outerHeight();
  
  $(document).on('scroll', function() {
    
    if($(this).scrollTop()>= bar2pos && !$(".navbar2").hasClass("fixedbar")){
       $(".navbar1").removeClass("fixedbar");
       $(".navbar2").addClass("fixedbar");
    }
    
    if($(this).scrollTop()<=bar2pos && $(".navbar2").hasClass("fixedbar")){
        $(".navbar1").addClass("fixedbar");
        $(".navbar2").removeClass("fixedbar");
    }
  });
  
});

    * {padding:0; margin:0;}
html, body, #page {height:100%;}

.fullscreen {background: red;}
.fullscreen h1 {padding-top:180px;text-align:center;}

.navbar1 {background:yellow; padding:5px; width:100%;}
.navbar2 {background:green; padding:5px; width:100%;}

.main-content {padding:10px;}
.main-content p {font-size:50px;}

.fixedbar
{
   position: fixed;
   left: 0px;
   top : 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div id="page"> 
  <div class="navbar1">
    <p>Navbar 1 : I am fixed but I want to stop just before Navbar2 !</p>
  </div>	
  <div class="fullscreen">
    <h1>Zone fullscreen</h1>
	</div>
  
  <div class="navbar2">
     <p>Navbar 2 : I become sticky on scroll</p>
	</div><!--/navbarLoc-->
  <div id="content">
    
  <div class="main-content">
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  </div><!--/content -->
</div><!--/page-->
</body>

到达div时停止顶部固定的元素

1 个答案: