Question

我已经开发了一段时间的项目，我已经创建了一个static的导航栏，直到滚动到此为止，此时它变为fixed到顶部屏幕。这个导航栏效果很好，但是当它变得粘滞时，它下方的元素会向上跳跃以填充它留下的空白。如何在导航条position发生变化后，这些元素保持静止状态？我已经在下面提供了相关代码，以防万一。

HTML：

<div id="navbar"><ul>
    <li id="activePage"><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Upcoming events </a><li>
    <li><a href="">Contact Us</a></li>
    <li><a href="">Contribute</a></li>
</ul></div>

的CSS：

#navbar {
    background-color: white;
    z-index: 1;
}

#navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

#navbar li {
    text-align: center;
    display: inline;
}

#navbar ul #activePage a {
    color: #cec8c8;
}

#navbar li a {
    color: black;
    padding: 14px 35px;
    text-decoration: none;
    font-family: 'Roboto Slab';
    font-size: 25px;
    text-align: center;
}

JS：

$(document).ready(function(){
    var elementPosition = $('#navbar').offset();
    $(window).scroll(function () {
        if ($(window).scrollTop() > elementPosition.top) {
            $('#navbar').css('position', 'fixed').css({'top':'0','left':'0','right':'0');
        } else {
            $('#navbar').css('position', 'static');
}})});

Answer 1

正如您已经暗示的那样，问题是，只要您将导航栏位置更改为固定，您就会将其从页面流中移除，并且下面的其余页面内容会被发送到＆＃34;向上＆＃34;填补空白。

如果您的div已将页面内容包装在导航栏下方，请在if语句中添加此内容，并在导航栏从页面流中删除的同时添加页边距。

 // Added margin top to the content's wrapper to account for the navbar being taken out of the flow of the page.
 $('***Main Content Wrapper Class/ID***').css('margin-top', '***[[THE HEIGHT OF THE NAV]]***'); 
// Once your scroll top is back to where the navbar is static again
  $('***Main Content Wrapper Class/ID***').css('margin-top', '0');

OR

// Or you can add a class and remove a class with the margin-top style within
   $('Main Content Wrapper Class/ID').addClass('scrolledNav');


   // Once your scroll top is back to where the navbar is static again
      $('Main Content Wrapper Class/ID').removeClass('scrolledNav');

<强> CSS：

  .scrolledNav {
        margin-top: [navbar height]px
    }

粘贴导航栏时，如何保持其他属性不变

1 个答案: