Question

我想创建一个浮动菜单，滚动时会保持在顶部。我找到了一些例子，并且能够复制它们，现在它可以工作了。但问题是，正如你在示例中看到的那样，当我滚动时，当滚动“跳起来”菜单下方的文本时，很难解释我的意思，但如果你看一下，你会立即看到问题是什么任何人都可以帮我解决这个问题吗？

Answer 1

添加.sectionHeading一个动态页边距：top等于菜单的高度，同样的事件触发固定类。

Answer 2

您需要在试错的基础上执行此操作。而且您需要更改静态父级。检查此示例并按照它进行操作。

<强>段

$(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 3

当您将菜单的类别从default更改为fixed时，文档的高度会因菜单的高度而降低，因为您更改了display的{{1}}你的菜单。

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

$(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并更改{{1}的可见性}从#menu到visible。

浮动菜单已修复

4 个答案: