jquery 侧边悬浮

梦馨娴 3个月前 70浏览 0评论

jQuery是一款优秀的JavaScript库,它简化了JavaScript的编程复杂性。其中,一个特别有用的功能是在网站上创建一个侧边悬浮导航菜单。

在网站的页面上嵌入如下代码:

<!--导航条HTML-->
<div class="sidenav">
  <a href="#">菜单1</a>
  <a href="#">菜单2</a>
  <a href="#">菜单3</a>
  <a href="#">菜单4</a>
</div>
<!--中间内容-->
<div class="content">
  <p>这是一个漂亮的侧边悬浮导航菜单的例子!</p>
</div>

接下来,在实现侧边悬浮导航菜单的JavaScript代码中,可以使用以下方法:

$(document).ready(function(){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
      $('.sidenav').addClass('fixed');
      $('.content').addClass('sidenav-scroll');//添加滚动效果
    } else {
      $('.sidenav').removeClass('fixed');
      $('.content').removeClass('sidenav-scroll');
    }
  });
});

在这段代码中,我们使用了jQuery的scroll()方法来检查窗口的滚动,并更改侧边导航栏的外观。当滚动条向下滚动到200像素时,我们添加fixed类,以使导航栏停留在页面顶部。如果窗口再次向上滚动,我们将fixed类删除,以使导航栏恢复其原始位置。

另外,还有一个添加滚动效果的类名sidenav-scroll。我们可以使用这个类名来实现侧边导航栏的滚动效果。

经过以上设置后,侧边悬浮导航菜单就已经完成了。它非常方便,可以为网站带来更加个性化的设计。