JS 選單內容關聯高亮滾動監聽
阿新 • • 發佈：2019-01-04
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0;padding: 0;} .main{ width: 1200px; margin: 0 auto;} .m-cloumn{ height: 300px; margin-bottom: 15px; border: 1px solid #ddd; box-shadow: 0 5px 5px -5px #f00;} .right-cloumn{ position:fixed; width: 120px; top: 100px;right: 50px; border: 1px solid #ddd;} .right-cloumn a{ display: block; height: 40px; line-height: 40px; border-bottom: 1px solid #eee; text-align: center;} .right-cloumn .curr{ background: #F0AD4E; color: #fff;} </style> </head> <body> <div class="main"> <div class="m-cloumn" id="c1"> <h2>欄目1</h2> </div> <div class="m-cloumn" id="c2"> <h2>欄目2</h2> </div> <div class="m-cloumn" id="c3"> <h2>欄目3</h2> </div> <div class="m-cloumn" id="c4"> <h2>欄目4</h2> </div> <div class="m-cloumn" id="c5"> <h2>欄目5</h2> </div> <div class="m-cloumn" id="c6"> <h2>欄目6</h2> </div> <div class="m-cloumn" id="c7"> <h2>欄目7</h2> </div> </div> <div class="right-cloumn"> <a href="#c1" class="curr">欄目1</a> <a href="#c2">欄目2</a> <a href="#c3">欄目3</a> <a href="#c4">欄目4</a> <a href="#c5">欄目5</a> <a href="#c6">欄目6</a> <a href="#c7">欄目7</a> </div> <script src="http://static.gutou.com/js/common.js?2015071101.js" type="text/javascript"></script> <script> (function($,win,doc){ var scroll_rsilder={ win_evet:function(){ $(win).bind("scroll",function(){ var scrollTop=$(this).scrollTop(); _this.ele_evet(scrollTop); }) }, ele_evet:function(scrollTop){ $(this.cloumn).each(function(index){ var offsetTop=$(this).offset().top; xd=parseInt(offsetTop-scrollTop); if(xd<_this.spacing) $(_this.silder).eq(index).addClass(_this.curr).siblings().removeClass(); }) }, init:function(obj){ _this=this, this.cloumn=obj.cloumn, this.silder=obj.silder, this.spacing=obj.spacing||100, this.curr=obj.curr||"curr"; if(!this.cloumn) return; this.win_evet(); } } win.scroll_rsilder=scroll_rsilder; })(jQuery,window,document) </script> <script> $(function(){ scroll_rsilder.init({ cloumn:".m-cloumn", silder:".right-cloumn a", spacing:80, curr:"curr" }) }) </script> </body> </html>