熟悉 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