Question

当用户滚动浏览单页网站时，我试图在导航栏中实现更改，因为每个部分反映了不同的导航栏按钮，我希望它们在用户滚动到相应页面时突出显示，

我已经看过并尝试在那里实施一些解决方案，（在这里堆）但我没有运气。

我的js代码在这里：

    // Cache selectors
var lastId,
    topMenu = $("#primary-menu"),
    topMenuHeight = topMenu.outerHeight()+30,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = 300 + menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    }) ;


// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});

header.php中的代码 - 声明navbar

<div id="navbar" class="navbar">
            <nav id="site-navigation" class="navigation main-navigation" role="navigation">
                <button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
                <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
                <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'menu_id' => 'primary-menu' ) ); ?>
                <?php get_search_form(); ?>
            </nav><!-- #site-navigation -->
        </div><!-- #navbar -->

来自page-home.php的代码 - 部分示例：

    <div class="section6" id="connect">
<div class = "heading1">connect</div>
<div class="contactform">
<?php if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 6 ); } ?>
</div>
</div>

相关的css代码：

.main-navigation {
text-align:right;
clear: both;
margin: 0 auto;
max-width: 1080px;
min-height: 75px;
position: relative;
  background-image:url("images/logo-white.png");
background-size:70px auto;
background-repeat:no-repeat;
background-position:10px 15px;
}

ul.nav-menu,
div.nav-menu > ul {
line-height: 75px;
margin: 0;
padding: 0 40px 0 0;
}

.nav-menu li {
display: inline-block;
position: relative;

}

.nav-menu li a {
color: #737373;
display: block;
font-size: 10px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
text-transform:uppercase;
letter-spacing:3px;
outline:none;

}


.nav-menu li.active,
.nav-menu li.active > a {
color: #FCFBD9;

}

.navmenu li a .active {
color: #FCFBD9;
}

.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus {
color: #FCFBD9;
}

此脚本来自朋友的网站，效果很好。由于命名惯例相同，我无法理解为什么它不会采取任何行动。

也许这可能是一个CSS问题？

该网站是www.enitrecreative.com/stone

感谢您提供任何帮助/建议/建议！

Answer 1

你需要做的就是使用一个scrollspy，所以在导航中你指定你的href，你会用#about然后你就像这样命名你的部分，它应该有效。

更改页面滚动时突出显示的导航栏按钮（不工作）

1 个答案: