堆栈内存溢出
  繁体   English   中英

固定垂直导航菜单，动态更改菜单按钮

[英]Fixed vertical navigation menu with dynamically changing menu buttons

 原文  2015-05-07 06:03:17  3   2    javascript/ jquery/ html/ css/ ajax

问题描述

我已经为我的网站创建了一个主题，在网页的右侧有一个固定的垂直导航菜单，以帮助用户滚动到网站的不同部分。 现在，这些导航菜单按钮可以帮助用户移动到页面的不同部分，但是当我们点击一​​个部分（或）的点时，如果我们通过滚动遍历一个部分，菜单点的颜色不会改变向上/向下。 如何使点的颜色在下面的代码中“动态地”改变？ ： - 

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body{
background-color:#3E3947;
} 
#cd-vertical-nav {
 position: fixed;
 right: 40px;
 top: 50%;
 bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
 transform: translateY(-50%);
 z-index: 1;
}
#cd-vertical-nav li {
text-align: right;
list-style:none;
}
#cd-vertical-nav a {
display: inline-block;
/* prevent weird movements on hover when you use a CSS3 transformation -   webkit browsers */
-webkit-backface-visibility: hidden;
 backface-visibility: hidden;
}
#cd-vertical-nav a:after {
 content: "";
 display: table;
 clear: both;
 }
 #cd-vertical-nav a span {
 display: inline-block;
 float: right;
 -webkit-transform: scale(0.6);
 -moz-transform: scale(0.6);
 -ms-transform: scale(0.6);
 -o-transform: scale(0.6);
  transform: scale(0.6);
  }
  #cd-vertical-nav a:hover span {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
   transform: scale(1);
  }
  #cd-vertical-nav a:hover .cd-label {
  opacity: 1;
  }
  #cd-vertical-nav a.is-selected .cd-dot {
  background-color: white;
  }
  #cd-vertical-nav .cd-dot {
  position: relative;
  top: 8px;
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background-color: #d88683;
  -webkit-transition: -webkit-transform 0.2s, background-color 0.5s;
  -moz-transition: -moz-transform 0.2s, background-color 0.5s;
  transition: transform 0.2s, background-color 0.5s;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
   }
  #cd-vertical-nav .cd-label {
   position: relative;
   margin-right: 10px;
   padding: .4em .5em;
   color: white;
   font-size: 14px;
   font-size: 0.875rem;
   -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
   -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0;
   -webkit-transform-origin: 100% 50%;
   -moz-transform-origin: 100% 50%;
   -ms-transform-origin: 100% 50%;
   -o-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    }


/*********************************RIGHT SIDE    *************************************/

    </style>
</head>
<body>
    <nav id="cd-vertical-nav">
    <ul>
        <li>
            <a data-number="1" href="#section1" class="is-selected">
                <span class="cd-dot"></span>
                <span class="cd-label">Intro</span>
            </a>
        </li>
        <li>
            <a data-number="2" href="#section2" class="">
                <span class="cd-dot"></span>
                <span class="cd-label">About</span>
            </a>
        </li>
        <li>
            <a data-number="3" href="#section3" class="">
                <span class="cd-dot"></span>
                <span class="cd-label">Features</span>
            </a>
        </li>
        <li>
            <a data-number="4" href="#section4" class="">
                <span class="cd-dot"></span>
                <span class="cd-label">Portfolio</span>
            </a>
        </li>
        <li>
            <a data-number="5" href="#section5">
                <span class="cd-dot"></span>
                <span class="cd-label">Pricing</span>
            </a>
        </li>
        <li>
            <a data-number="6" href="#section6">
                <span class="cd-dot"></span>
                <span class="cd-label">Contact</span>
            </a>
        </li>
    </ul>
</nav>

    <section id="section1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>

    </section>

    <section id="section2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>        

    </section>

    <section id="section3">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>   
    </section>

</body>

我需要编写哪些JavaScript / Ajax / jQuery / HTML / CSS代码才能使其工作？

那就是我们如何“动态地”改变代码上的{class =“is-selected”}： - 

<li> <a data-number="2" href="#section2" class=""> <span class="cd-dot">      </span> <span class="cd-label">About</span> </a> </li>

等等其他代码部分/导航部分??? 我想这可以解决问题

2 个解决方案

解决方案1
 4 已采纳  2015-05-07 06:37:47

您可以为活动类执行此操作（非常类似于@Sachink建议）： 

var $navLinks = $('#cd-vertical-nav a');

$navLinks.on('click', function(){
  $navLinks.removeClass('is-selected');
  $(this).addClass('is-selected');
});

对于滚动，您需要在每个<section>观看滚动位置，当scrollTop与某个部分匹配时，将相应的菜单项的类设置为is-selected如下所示： 

var windowHeight = $(window).height();
$('section').each(function(){
  var $this = $(this);
  $(document).scroll(function(){
    var scrollTop = $(window).scrollTop();
    var offset = $this.offset().top;
    var height = $this.outerHeight();

    if (offset + height <= scrollTop || offset >= scrollTop + (windowHeight - (height / 2))) {
      return;
    }

    var selector = '[href="#' + $this.prop('id') + '"]';
    var $menuItem = $navLinks.filter(selector);

    $navLinks.removeClass('is-selected');
    $menuItem.addClass('is-selected');
  });
});

你可以在这里看到一个有效的例子： http ： //jsfiddle.net/5w2bkd6k/2/

解决方案2
 3  2015-05-07 06:26:10

您需要添加以下jQuery代码： 

<script>
    $(document).ready(function(){
        $('nav li a').click(function(){
            $('nav li a').removeClass('is-selected');
            $(this).addClass('is-selected');
        })
    });
</script>

见小提琴： http ： //jsfiddle.net/sachinkk/5w2bkd6k/1/

要么

我建议你使用以下代码进行平滑滚动 

    $(document).ready(function(){
        $('nav li a').click(function(){
            $('nav li a').removeClass('is-selected');
            $(this).addClass('is-selected');
            event.preventDefault();
            var toGo = $(this).attr('href');
            $('html, body').animate({
                scrollTop: $(toGo).offset().top
            }, 1000);
        })
    });

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 将垂直菜单更改为水平菜单 调整固定导航菜单的大小 布尔马更改导航菜单 如何创建垂直导航菜单？ jquery - 垂直手风琴导航菜单 如何设置导航菜单以填充没有固定高度的导航栏后剩余的垂直空间？ 将Jquery垂直选项卡更改为菜单 滚动后固定导航菜单 固定的动态侧边栏导航菜单？ 记住菜单状态垂直多级导航
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM