jquery - 从加载的 anchor 向后滚动时，带有 jQ​​uery 的 CSS 类未正确应用于 div

Question

我在 Bootstrap 3 网站中构建了第二个菜单 (#service-div)，当您向下滚动页面时它会改变其外观(请参阅 jQuery)，即应用了收缩类。

这本身就完美无缺。

但是，当我用指定的 anchor 加载页面时，问题就出现了 (例如 http://localhost/services.html#service6)并向上滚动(见最后一张图片)。 在这种情况下，未正确应用原始设置，这会破坏菜单。

如果您建议如何解决此问题，我将不胜感激。

HTML

<!-- service-nav -->
    <div id="service-nav">

      <div class="container-fluid">

        <div class="container text-center">

          <ul class="nav">
            <li> <a href="#service1"><i class="fa fa-cloud fa-3x"></i><p>Test</p></a></li>
            <li> <a href="#service2"><i class="fa fa-terminal fa-3x"></i><p>Test</p></a></li>
            <li> <a href="#service3"><i class="fa fa-cog fa-3x"></i><p>Test</p></a></li>
            <li> <a href="#service4"><i class="fa fa-comment fa-3x"></i><p>Test</p></a></li>
            <li> <a href="#service5"><i class="fa fa-keyboard-o fa-3x"></i><p>Test</p></a></li>
            <li> <a href="#service6"><i class="fa fa-shield fa-3x"></i><p>Test</p></a></li>
          </ul>   

        </div>

      </div>

    </div><!-- /.service-nav -->

jQuery

<script>

    $(window).scroll(function() {    

    $("#service-nav").removeClass("shrink");

    var scroll = $(window).scrollTop();

    if (scroll >= 650) {
      $("#service-nav").addClass("shrink");
      }
    });

</script>

少

.shrink {

    ul li {
        padding: 10px 50px 10px 50px !important;
    }

    i {
        font-size: 29px;
    }

    p {
        display: none;
    }
}

初始菜单

滚动后应用于菜单的收缩类

从 anchor 向上滚动时菜单损坏

Answer 1

认为您可以尝试在页面加载时调用该函数 像这样的东西:

function scrolling() {    

$("#service-nav").removeClass("shrink");

var scroll = $(window).scrollTop();

if (scroll >= 650) {
  $("#service-nav").addClass("shrink");
  }
}

$(function()
{ 
    scrolling();
    $(window).scroll(scrolling);
});