Question

我已在网站顶部修复了bootstrap 3.0导航栏。对于大型内容，当用户向下滚动时，网站内容会在其下方移动。样本位于：http://www.bootply.com/wgOrXN2R2b

我想在用户滚动并且页面内容移动到导航栏下方时立即在导航栏上设置css，并在用户向上滚动并且内容不再低于导航栏时删除css。（css将为导航添加一个框阴影，并在内容移动到其下方时形成一条细的透明线）

我在js下面使用过：

 function scroll() {        
        if ($(window).scrollTop() >= $('#content').offset().top) {
            $(".navbar-fixed-top").addClass('fadeOut');
        } else {
            $(".navbar-fixed-top").removeClass('fadeOut');
        }

    }    
    document.onscroll = scroll;

但正如您在样本中看到的那样，它不能正常工作，并且css在某些行之后适用。

Answer 1

我认为你只需要考虑导航栏的高度

if ($(window).scrollTop() > ($('#content').offset().top - 50)) {

Answer 2

使用Bootstrap及其附加的javascript模块之后，有一种更干净的方式来做我认为你的事情。查看他们的文档：http://getbootstrap.com/javascript/#affix

要实现您所追求的目标，使用bootstrap，只需将其添加到您要修改的div中，根据需要更改偏移值（但为了使其正常工作，您需要确保'重新调用你的bootstrap.js文件）：

  data-spy="affix" data-offset-top="60" data-offset-bottom="200"

在您更改导航栏的情况下，您将按照以下方式应用它：

<div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="60" data-offset-bottom="200">

这将会导致你的导航栏上有3个类。当它接近顶部时，它将是.affix-top，当它接近底部时你将获得.affix-bottom，当它不是时，你将获得.affix。

.affix将使用默认的bootstrap css应用“固定”类，但您实际上可以使用偏移值围绕这3个事物构建自己的特定类。您的导航栏默认情况下会应用Drophadow，但是当它有.affix-top时，请将其删除。

Bootstrap 3.0：在带有修复导航栏的内容下移动时触发

2 个答案: