熟悉 scrollTop ，輕鬆作5個方面的事情。

時間 2019-11-21

標籤熟悉 scrolltop 輕鬆方面事情简体版

原文原文鏈接

經過獲取 scrollTop （滾動條頂部）的偏移值，咱們能夠作5個事情，也是平時項目中常常用到的幾個；javascript

① 加載時，獲取偏移值，而後作一些操做；

// ① 此處只是頁面加載時 不能實時監控
  $(function(){
	   if ( $(window).scrollTop() > 50 ){
		   alert(50)
		   }
	  })

② 實時監控頁面滾動條變化時，實時作出一些操做；

$(function(){ 
     $(window).scroll(function () {  // ② 監控頁面滑動變化時 作判斷 
			if ($(window).scrollTop() > 0) {
			  $("#div1").show(300);
			}
			
			if ($(window).scrollTop() > 300) {
			  $("#div2").show(300);
			}
			
			
			 if ($(window).scrollTop() > 600) {
			  $("#div3").show(300);
			}   
       })      
});

③ 點擊某些固定的按鈕，讓頁面滑到指定的錨點；

//③ 經過按鈕帶到錨點位置
$("#go_top").click(function(){
	$("html,body").animate({scrollTop:$("body").offset().top},500)
})

④ 另外：初始菜單在一個位置，滾動條下拉後，菜單固定實例

js以下css

$(function(){
	$(window).scroll(function () { 
		var this_obj= $(".nav-warp")
		if ( $(window).scrollTop() > 50 ){
		   this_obj.addClass("nav-scrolling");
		}
		else{
			this_obj.removeClass("nav-scrolling");
		}
	})
})

css以下： html

.nav-scrolling{ top:0px; position: fixed;}

⑤ 獲取地址欄參數，頁面滑動到指定位置。

js以下

/******獲取地址欄參數滑動到指定位置--開始******/

        //傳遞方法：XXXX.html?id=messages

        //獲取參數
        function UrlSearch()
        {
            var name,value;
            var str=location.href; //取得整個地址欄
            var num=str.indexOf("?")
            str=str.substr(num+1); //取得全部參數   stringvar.substr(start [, length ]

            var arr=str.split("&");
            for(var i=0;i < arr.length;i++){
                num=arr[i].indexOf("=");
                if(num>0){
                    name=arr[i].substring(0,num);
                    value=arr[i].substr(num+1);
                    this[name]=value;
                }
            }
        }

        //執行方法
        var Request=new UrlSearch();
        var this_id=Request.id;
        console.log(this_id);
        if (this_id=="messages")
        {
            $("html,body").animate({scrollTop:$("#current_messages").offset().top},500)
        }

    /******獲取地址欄參數滑動到指定位置--結束******/

html以下：java

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table width="100%">
			<tr>
				<td height="500" style="background：blue;"></td>
			</tr>
			<tr>
				<td height="800" style="background: green;" id="current_messages"></td>
			</tr>
		</table>
	</body>
</html>


<!--
	好比說把這個代碼存爲demo.html
	那麼我要訪問demo.html?id=test
	這個時候就取到test的值了
-->

備註：this

定位失效問題？多是這個緣由致使的。

第一種狀況：spa

.list-content{ width: 100%; padding-right: 15px; box-sizing: border-box; clear: both; overflow: hidden;} 若是你的容器高度不肯定，後面必定要加上overflow: hidden; 讓其撐起來，不然，經過指定錨點的定位會找不許，由於實際高度js算不出來。插件

第二種狀況:code

在用到第三方插件時，有些樣式會將html高度設置爲100%；這樣會把srollTop滑動無效，解決辦法：用媒體查詢，在大屏時，不設html的高度值。htm

相關標籤/搜索

每日一句

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