固定浮动菜单

Question

我想创建一个浮动菜单，它在滚动时会保持在顶部。我找到了一些示例并能够复制它们，现在可以使用了。但是，问题是，正如你在示例中看到的，当我滚动时，滚动时菜单下方的文字"jumps up"，很难解释我的意思，但如果你看一下，你会立即看看是什么问题。谁能帮我解决这个问题？

Answer 1

您需要在反复试验的基础上执行此操作。而你需要改变一个静态parent。检查此示例并遵循它。

片段

$(function () {
  $(window).scroll(function () {
    if ($(window).scrollTop() > 125)
      $("body").addClass("fixed");
    else
      $("body").removeClass("fixed");
  });
});

* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
h1, h2 {font-weight: normal;}
h1 {font-size: 1.5em;}
h2 {font-size: 1.25em;}
h1, h2, p {margin: 0 0 15px;}
.fixed {padding-top: 42px;}
.fixed .static {position: fixed; top: 0; width: 100%; background: #fff; padding-bottom: 15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Static Header Example</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, cumque inventore laudantium quod, vel pariatur dolore obcaecati veniam aspernatur aliquam ad dolorum possimus illo facilis et totam nam unde, sint?</p>
<h2 class="static">This is gonna be Static!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempore praesentium eos odio nobis dignissimos labore expedita corrupti sapiente perferendis consequuntur, in, eveniet error! Officiis iste architecto eos? Deserunt, delectus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, blanditiis dolore ipsum odit sint delectus assumenda excepturi dolor rem aperiam magni eligendi quidem suscipit nam ullam porro tenetur tempora ut!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis tempore praesentium eos odio nobis dignissimos labore expedita corrupti sapiente perferendis consequuntur, in, eveniet error! Officiis iste architecto eos? Deserunt, delectus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, blanditiis dolore ipsum odit sint delectus assumenda excepturi dolor rem aperiam magni eligendi quidem suscipit nam ullam porro tenetur tempora ut!</p>

Answer 2

添加 .sectionHeading 一个等于菜单高度的动态 margin:top，具有触发固定 class.

的相同事件

Answer 3

当您将菜单的 class 从 default 更改为 fixed 时，文档的高度将减少菜单的高度，因为您更改了display 您的菜单。

解决方法是，当您将菜单的 class 从 default 更改为 fixed 时，您可以在文档的 body 中添加一些 padding （菜单元素的高度很好）并在将菜单的 class 从 fixed 更改为 default 时删除 padding。

$(function(){
    var menu = $('#menu'),
    pos = menu.offset();
    $(window).scroll(function(){
        if($(this).scrollTop() > pos.top && menu.hasClass('default')){
            menu.hide(1, function(){
                $(this).removeClass('default').addClass('fixed').show(1);
                $('body').css('padding-top', '111px');
            });
        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.hide(1, function(){
                $(this).removeClass('fixed').addClass('default').show(1);
                $('body').css('padding-top', '0');
            });
        }
    });
});

Answer 4

您可以像菜单一样添加另一个 div，但是使用 class="fixed" 和 display: none，当滚动条到达页面顶部时，您可以显示 div并将 #menu 的可见性从 visible 更改为 hidden。

固定浮动菜单

Floating menu fixed

javascript

css

jquery

menu