Question

当我滚动浏览某个点时，我试图完成将菜单粘贴到浏览器窗口顶部的简单效果，但出现问题并且菜单不会固定到顶部。从图书馆我使用jQuery并为其制作动画。我的代码如下：

HTML：

<nav class="animatedParent">
    <ul class="animated bounceInUp delay-750">
        <li class="animated"><a href="#">O meni</a></li>
        <li class="animated"><a href="#">Katalog</a></li>
        <li class="animated"><a href="#">Razno</a></li>
    </ul>
</nav>

CSS：

.fixedNav {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba( 0, 0, 0, .8);
    height: 100px;
}

nav {
    width: 400px;
    margin:  20px auto;
}

nav ul {
    list-style: none;
}

nav ul li {
    float: left;
    overflow: auto;
    width: 130px;
}

nav ul li a {
    font-size: 35px;
    font-family: 'Indie Flower', cursive;
    color: #fff;
    cursor: pointer;
    transition: 500ms linear all;
}

nav ul li a:hover {
    color: #123456;
    transition: 500ms linear all;
}

JS（jQuery）：

$(document).ready(function(){
    $("nav ul li").mouseenter(function() {
        $(this).addClass("wiggle");
    });
    $("nav ul li").mouseleave(function() {
        $(this).removeClass("wiggle");
    });

    var nav = $("nav").offsetTop();
    if($(window).scrollTop() > nav) {
        $("nav").addClass("fixedNav");
        console.log('Hello!');
    } else {
        $("nav").removeClass("fixedNav");
    }
});

Answer 1

您需要使用事件scroll并检查那里的偏移量。

当用户滚动时，toggleClass会根据条件$window.scrollTop() > navOffset添加/删除该类，该条件将返回true或false

var $window = $(window);
var $nav = $('nav');
var navOffset = $nav.offsetTop();

$window.on('scroll', function() {
  $nav.toggleClass('fixedNav', $window.scrollTop() > navOffset);
});

Answer 2

首先，您只使用一次代码，即加载文档时。每次滚动文档时都要检查，因为滚动一定量后代码应该被触发。

$(document).scroll(function(){
  var nav = $("nav").height();
  if($(window).scrollTop() > nav) {
    $("nav").addClass("fixedNav");
  } else {
    $("nav").removeClass("fixedNav");
  }
});

body {
background: black; 
height:700px;
}
.fixedNav {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba( 0, 0, 0, .8);
  height: 100px;
}
nav {
  display: block;
height: 100px;
  width: 100%;
  margin:  20px auto;
}
nav ul {
  list-style: none;
}
nav ul li {
  float: left;
  overflow: auto;
  width: 130px;
}
nav ul li a {
  font-size: 35px;
  font-family: 'Indie Flower', cursive;
  color: #fff;
  cursor: pointer;
  transition: 500ms linear all;
}
nav ul li a:hover {
  color: #123456;
  transition: 500ms linear all;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="animatedParent nav">
      <ul class="animated bounceInUp delay-750">
        <li class="animated"><a href="#">O meni</a></li>
        <li class="animated"><a href="#">Katalog</a></li>
        <li class="animated"><a href="#">Razno</a></li>
      </ul>
    </nav>

Answer 3

添加滚动事件以检查滚动位置

例如：

$(document).scroll(()=>{...});

喜欢here

这是一个非常简单的演示，它只展示了我的意思

Answer 4

您可以使用像scrollMonitor这样的库来完成您的任务，因为滚动监控有其自己的注意事项。

您可以让scrollMonitor在离开视口时锁定菜单的位置，如下所示：

var $menu = document.querySelector('nav'); // It is better to use CSS class name instead
var watcher = scrollMonitor.create($menu);
watcher.lock();
watcher.exitViewport(function() {
    $menu.classList.add('fixedNav');
});
watcher.enterViewport(function() {
    $menu.classList.remove('fixedNav');
});

请参考this example，因为它与您的任务非常匹配。

Answer 5

您不会检查scroll事件上当前滚动的检查。这是你正在寻找的事件。你也可以检查文档上的scrollTop（它在jQuery中更多的是错误证明），而不是在窗口上，因为它并不总是有效。

$(document).ready(function(){
  $("nav ul li").mouseenter(function() {
    $(this).addClass("wiggle");
  });
  $("nav ul li").mouseleave(function() {
    $(this).removeClass("wiggle");
  });
  $(document).on('scroll', function() {
      var nav = $("nav").offsetTop();
      if($(document).scrollTop() > nav) {
        $("nav").addClass("fixedNav");
        console.log('Hello!');
      } else {
        $("nav").removeClass("fixedNav");
      }
  })
});

Answer 6

这就是你要找的东西：

＆＃13;

$(document).ready(function(){
  $("nav ul li").mouseenter(function() {
    $(this).addClass("wiggle");
  }) ;
  $("nav ul li").mouseleave(function() {
    $(this).removeClass("wiggle");
  }) ;
});

$(document).ready(fixedHeader) ;

$(window).scroll(fixedHeader) ;

function fixedHeader() {
  var nav = parseInt($("nav").css("margin-top")) ;

  if($(window).scrollTop() > nav) {
    $("nav").addClass("fixedNav");
  }
  else {
    $("nav").removeClass("fixedNav");
  }
}

＆＃13;

body{
  height: 1000px;
}
.fixedNav {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba( 0, 0, 0, .8);
  height: 100px;
}
nav {
  width: 400px;
  margin:  20px auto;
}
nav ul {
  list-style: none;
}
nav ul li {
  float: left;
  overflow: auto;
  width: 130px;
}
nav ul li a {
  font-size: 20px;
  font-family: 'Indie Flower', cursive;
  color: #fff;
  cursor: pointer;
  transition: 500ms linear all;
}
nav ul li a:hover {
  color: #123456;
  transition: 500ms linear all;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="animatedParent">
  <ul class="animated bounceInUp delay-750">
    <li class="animated"><a href="#">O meni</a></li>
    <li class="animated"><a href="#">Katalog</a></li>
    <li class="animated"><a href="#">Razno</a></li>
  </ul>
</nav>

＆＃13;

菜单whant在滚动时固定在顶部

6 个答案: