頁面滾動條滾動後返回事件----JS

時間 2020-05-28

標籤頁面滾動條滾動返回事件欄目 JavaScript 简体版

原文原文鏈接

這兩天小碼哥在作頁面的時候，其中有一個效果是想讓右側的一個導航隨着頁面向下滾動而由原來的固定（position:absolute;）模式改成懸浮（position:fixed;）模式。我當時就想到了返回函數。但是依照本身的想法寫了幾個JS都沒成功，我在想確定是我用錯了方法了。後來通過偶一再查證，終於解決了該問題，，，下面是想分享給你們的代碼。重點其實就是那段JS。固然，其中原理還得是靠本身領悟了。哈哈javascript

代碼：css

<!doctype html>html

<html>java

<head>jquery

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">ide

<title>利用錨點點擊跳轉</title>函數

<style type="text/css">ui

.content{width:1000px;margin:0 auto;}this

.cont{height:500px;}spa

.cont1{background:#666666;}

.cont2{background:#999999;}

.cont3{background:#CCCCCC;}

.cont4{background:#FF0000;}

.cont5{background:#6699CC;}

.cont h4{font-size:16px;}

.pop1{position:absolute;top:800px;right:50px;width:100px;height:240px;border:1px #00FFFF solid;margin:0;padding:0;list-style:none;}

.pop1 li{width:100px;}

.pop1 li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}

.pop1 li a:hover{background:#6699CC;color:#00FFCC;}

.pop{width:100px;height:240px;border:1px #00FFFF solid;position:fixed;margin:0;padding:0;top:50%;margin-top:-396px;right:50px;list-style:none;}

.pop li{width:100px;}

.pop li a{display:block;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;background:#ccc;color:#fff;text-decoration:none;}

.pop li a:hover{background:#6699CC;color:#00FFCC;}

</style>

</head>

<body id="top">

<div class="content">

<div class="cont1 cont"><h4 id="5_1">週一</h4></div>

<div class="cont2 cont"><h4 id="5_2">週二</h4></div>

<div class="cont3 cont"><h4 id="5_3">週三</h4></div>

<div class="cont4 cont"><h4 id="5_4">週四</h4></div>

<div class="cont5 cont"><h4 id="5_5">週五</h4></div>

</div>

<ul id="popup" class="pop1">

<li class="lis"><a href="#5_1" title="">星期一</a></li>

<li class="lis"><a href="#5_2" title="">星期二</a></li>

<li class="lis"><a href="#5_3" title="">星期三</a></li>

<li class="lis"><a href="#5_4" title="">星期四</a></li>

<li class="lis"><a href="#5_5" title="">星期五</a></li>

<li><a class="toTop" href="#top" title="">Top</a></li>

</ul>

<script src="js/jquery1.11.1.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#popup .lis a").click(function() {

$("html, body").animate({

scrollTop: $($(this).attr("href")).offset().top + "px"

}, 500);

return false;

});

$(document).scroll(function(){

if($(window).scrollTop()>800){

$('#popup').removeClass('pop1').addClass('pop');

}else{

$('#popup').removeClass('pop').addClass('pop1');

};

});

});

</script>

</body>

</html>

在此，小碼哥還想提醒你們，注意JS中的$(document).scroll(function(){});方法。

相關文章

相關標籤/搜索

LCS滾動數組

PHP 7 新特性

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<