                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /網(wǎng)頁定位導航特效

1：感覺滾動條焦點沒有變顏色，哪里不對??？ console.log(top)怎么打不出來啊

焦點沒有跟著內容而變化，到底哪里不對呢，js部分不行，css 的有效果<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
?? ?<script type="text/javascript">
?? ??? ?$(document).ready(function () {
???? $(window).scroll(function () {
???????????? var items = $("#content").find(".item"); //先根據(jù)#content再去查找.item 提高效率
??????????????? var menu = $("#menu");
??????????????? var top = $(document).scrollTop();
??????????????? //console.log(top);
??????????????? var currentId = ""; //滾動條現(xiàn)在所在位置的item id
??????????????? items.each(function () {
??????????????????? var m = $(this);
??????????????????? //注意：m.offset().top代表每一個item的頂部位置
??????????????????? if (top > m.offset().top - 300) {
??????????????????????? currentId = "#" + m.attr("id");
??????????????????? } else {
??????????????????????? return false;
??????????????????? }
??????? });
?? var currentLink = menu.find(".current");
???? if (currentId && currentLink.attr("href") != currentId) {
???????? currentLink.removeClass("current");
??????????????????? menu.find("[href=" + currentId + "]").addClass("current");
??????????????? }
??????????? });
??????? });

慕仙5237505

2017-11-16

源自：網(wǎng)頁定位導航特效 4-5

關注問題我要回答

1764

操作

收起

3 回答

麓鹿不迷路
2018-06-06

因為引入的js網(wǎng)址改了，要把http改成https，不然你的js代碼都不起作用

0 回復有任何疑惑可以回復我~

收起回答

慕仙5237505 提問者
2017-11-17

改了，可是還是右側焦點定位滾動條滾動還是沒有反應
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>地狗購物網(wǎng)——網(wǎng)頁定位導航效果</title>
<style>
??????? * {
??????????? margin: 0;
??????????? padding: 0;
??????? }

??????? body {
??????????? font-size: 12px;
??????????? line-height: 1.7;
??????? }

??????? li {
??????????? list-style: none;
??????? }

??????? #content {
??????????? width: 800px;
??????????? margin: 0 auto;
??????????? padding: 20px;
??????? }

??????? #content h1 {
??????????? color: #0088bb;
??????? }

??????? #content .item {
??????????? padding: 20px;
??????????? margin-bottom: 20px;
??????????? border: 1px dotted #0088bb;
??????? }

??????? #content .item h2 {
??????????? font-size: 16px;
??????????? font-weight: bold;
??????????? border-bottom: 2px solid #0088bb;
??????????? margin-bottom: 10px;
??????? }

??????? #content .item li {
??????????? display: inline;
??????????? margin-right: 10px;
??????? }

??????? #content .item li a img {
??????????? width: 230px;
??????????? height: 230px;
??????????? border: none;
??????? }

????? ?
/*請補充此處代碼，讓導航菜單在右側絕對定位顯示*/
??????? #menu {
??????????? position:fixed;
??????????? left:50%;
??????????? top:100px;
??????????? margin-left:370px;
??????? }

??????? #menu ul li a {
??????????? display: block;
??????????? margin: 5px 0;
??????????? font-size: 14px;
??????????? font-weight: bold;
??????????? color: #333;
??????????? width: 80px;
??????????? height: 50px;
??????????? line-height: 50px;
??????????? text-decoration: none;
??????????? text-align: center;
??????? }

??????? #menu ul li a:hover,
??????? #menu ul li a.current {
??????????? color: #fff;
??????????? background: #0088bb;
??????? }

??????? /*ie6 hack*/
??????? * html, * html body {
??????????? background-image: url(about:blank);
??????????? background-attachment: fixed;
??????? }

??????? * html #menu {
??????????? /*position: fixed;*/
??????????? position: absolute;
??????????? top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
??????? }

</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script>
<script>
?$(document).ready(function(){
??????? $(window).scroll(function(){
??????????? var top = $(document).scrollTop();
??????????? var menu = $("#menu");
??????????? var items = $("#content").find(".item");
??????????? var currentId = "";
?????????? items.each(function(){
?????????????? var t = $(this);
?????????????? var ttop = t.offset().top;
?????????????? if(top > ttop-300){
?????????????????? currentId = "#" + t.attr("id");
?????????????? }else{
?????????????????? return false;
?????????????? }
?????????? });
????????? ?
??????????? var currentLink = menu.find(".current");
?????????? if(currentId && currentId.attr("href")!=currentId){
?????????????? currentLink.removeClass(".current");
?????????????? menu.find('[href='+currentId+']').addClass("current");
?????????? }
??????? });
??? });
?????? //滾動條發(fā)生滾動時，要獲取相應的值。
????????? ?
??????????? //請補充此處代碼，讓導航菜單實現(xiàn)在滾動條滾動的時候自動設置焦點

??????????? //給相應樓層的a 設置 current，取消其他鏈接的current
?????????????? ?
</script>
</head>
<body>
<div id="menu">
<ul>


<li><a href="#item1" class="current">1F 男裝</a></li>
<li><a href="#item2">2F 女裝</a></li>
<li><a href="#item3">3F 美妝</a></li>
<li><a href="#item4">4F 數(shù)碼</a></li>
<li><a href="#item5">5F 母嬰</a></li>
</ul>
</div>
<div id="content">
<h1>地狗購物網(wǎng)</h1>

<div id="item1" class="item">
<h2>1F 男裝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//53660fce0001111903990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item2" class="item">
<h2>2F 女裝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//5366104c0001e5c403990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item3" class="item">
<h2>3F 美妝</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610820001cf5b03990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item4" class="item">
<h2>4F 數(shù)碼</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610ac00012df703990422.jpg" alt=""/></a></li>
</ul>
</div>
<div id="item5" class="item">
<h2>5F 母嬰</h2>
<ul>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
<li><a href="#"><img src="http://img1.sycdn.imooc.com//536610cd0001f34603990422.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</body>
</html>

0 回復有任何疑惑可以回復我~

收起回答

qq_傻愛_0
2017-11-17

?if (top > m.offset().top - 300) {
??????????????????????? currentId = "#" + m.attr("id");
??????????????????? } else {
??????????????????????? return false;
??????????????????? }

這句判斷方式不對，如果這樣寫的話在你的理論上是沒有什么問題的，但電腦會把?m.offset().top里的點解析成特殊符號，所以說沒發(fā)生變化，你應該先賦值? m.offset().top? ?把這個先提出來賦值? var mTop=m.offset().top ;? 然后把這個賦的值 mTop ；放進去就行了。

?if (top > mTop - 300) {
??????????????????????? currentId = "#" + m.attr("id");
??????????????????? } else {
??????????????????????? return false;
??????????????????? }