0

我正在构建一个单页网站，基本上是 4 个大 div。第一个是着陆部分。当用户向下滚动页面 id 时，喜欢从名为 about 的第二个 div 的顶部动画导航菜单。然后，该菜单将固定在窗口顶部。在滚动时找到 div 何时到达窗口顶部的最佳方法是什么？任何有关执行此操作的最佳方法的建议将不胜感激！请参阅基本页面结构的小提琴。

http://jsfiddle.net/aartese/3kRVm/11/

  <body>   
   <div class="row"><!--landing section -->
     <div class="col-md-12 landing">Landing</div>
   </div> <!-- /landing section -->
   <div class="row"><!--about section -->
    <div class="col-md-12 about">About</div>
   </div><!-- /about section -->
   <div class="row"><!-- professional profile section -->
    <div class="col-md-12 professional">Professional</div>
   </div><!-- /professional profile section -->
   <div class="row"> <!-- contact section -->
    <div class="col-md-12 contact">Contact</div>
   </div> <!-- /contact section -->    
  </body>
4

4 回答 4

3

用 $(window).scrollTop() 检查 div offset().top。

$(window).scroll(function(){
    if($(window).scrollTop() >= $('#sample').offset().top){
        $('#sample').addClass('black');
    }else{
        $('#sample').removeClass('black');
    }
})

这是一个演示：演示

于 2013-11-04T21:47:18.860 回答
1

我认为这对你来说可能是一个很好的解决方案

html:

<div id="menu">top menu </div>

CSS：

#menu {
width : 800px;
height : 50px;
background-color:blue;
position: fixed;
display : none;
}

脚本：

$(document).scroll(function() {
$('#menu').toggle($(this).scrollTop() > 80);
});

您现在可以在 jquery 中添加动画选项。

于 2013-11-04T21:59:25.913 回答
1

感谢 streetcoder 让我朝着正确的方向前进。我稍微修改了他的解决方案：

$(document).scroll(function() {
  var divHeight = $('.landingBackground').height();
  $('.navbar').toggle($(this).scrollTop() > divHeight);
});

这将获得第一个主 div(.landingBackground) 的高度。然后，当您滚动时，它会根据该高度切换菜单。

于 2013-11-04T22:34:33.510 回答
0

我不确定我是否得到你想要的......

About-Div 总是固定的吗？在这种情况下，您需要 css 的 position:fixes-property。

如果您只想在滚动传递第一个 div 后修复它，您必须确定该 div 的大小，然后检查（通过 Javascript）如果您通过 document.body.scrollTop 到达其底部

于 2013-11-04T21:48:41.027 回答