Question

我创建了一个单页网页模板，我试图根据我正在查看的部分旋转链接。

html的

 <nav class="navigation" role="navigation">
      <div id="nav-anchor"></div>
        <ul id="top-menu" class="primary-nav">
          <li><a href="#nas">Home</a></li>
          <li><a href="#portfolio">Gallery</a></li>
          <li><a href="#intro">About us</a></li>
          <li><a href="#testimonials">Testimonials</a></li>
          <li><a href="#calendar">Calendar</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
 </nav>

的.js

$(document).ready(function(){

  var $sections = $('.d');


  $(window).scroll(function(){

    var currentScroll = $(this).scrollTop();

    var $currentSection

    $sections.each(function(){

      var divPosition = $(this).offset().top;

      if( divPosition - 1 < currentScroll ){
        $currentSection = $(this);

        }

      var id = $currentSection.attr('id');
     $('a').removeClass('active');
     $("[href=#"+id+"]").addClass('active');

    })

  });
});

的CSS

.active {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
}

到目前为止对我不起作用。活动课程适用于我的链接，但CSS没有申请，我不明白为什么？

Answer 1

如果要将转换/转换添加到内联标记

，则必须添加一些位置并阻止CSS

a {psoition: relative; display: block;}

滚动页面时旋转导航链接 - CSS，jQ

1 个答案: