js滚动监听

滚动监听语句：

1、当前滚动的地方的窗口顶端到整个页面顶端的距离：

 var winPos = $(window).scrollTop();

2、获取指定元素的页面位置：     

  $(val).offset().top;

3、对页面滚动条滚动的监听：要放在页面加载的时候

$(window).scroll(function(event){
    });

4、设置滚动条到指定位置。

$(window).scrollTop(offset)。

5、获取水平滚动条的距离

$(document).scrollLeft();

6、获取整个页面高度

$(document).height();

7、获取当前浏览器，也就是你的浏览器所看到的页面部分的高度，会随着页面放缩改变

$(window).height();

 

$(window).height()代表了当前可见区域的大小，而$(document).height()则代表了整个文档的高度，可视具体情况使用.

注意当浏览器窗口大小改变时(如最大化或拉大窗口后) $(window).height() 随之改变，但是$(document).height()是不变的。

$(function (){
/*滚动监听 获取滚动条距页面顶端距离*/
    $(window).scroll(function(){
/*定义滚动条距顶端距离*/
        var ww=$(document).scrollTop();
/*根据距离判断，改变样式*/
        if(ww < 1200 && ww>0 ){            
            $("#mm1").css("background","#108EE9");
            $("#mm1").children('.j_p').css("color","#FFF");
            $("#mm1").find('span').css("color","#FFF");
            $("#mm2").css("background","#FFF");
              $("#mm2").children('.j_p').css("color","#108EE9");
            $("#mm2").find('span').css("color","#108EE9");
        }else if(ww<2000 && ww>=1200 ){
            $("#mm1").css("background","#FFF");
        $("#mm1").children('.j_p').css("color","#108EE9");
            $("#mm1").find('span').css("color","#108EE9");            
            $("#mm2").css("background","#108EE9");
            $("#mm2").children('.j_p').css("color","#FFF");
            $("#mm2").find('span').css("color","#FFF");
        }
    });

锚点定位：

用a标签，href=“#id”,链接要定位的id属性

<a href="#id">
<div>跳转</div>
</a>

　　

鼠标滚轮：mousewheel

这个事件在标准下和IE下是有区别的。

firefox是按标准实现的,事件名为"DOMMouseScroll ",IE下采用的则是"mousewheel "。

 当然一行代码就解决了兼容问题 

var mousewheel = document.all?"mousewheel":"DOMMouseScroll"; 

事件属性，IE是event.wheelDelta，Firefox是event.detail 属性的方向值也不一样，

IE向上滚 > 0，Firefox向下滚 > 0。

 

使用mousewheel事件有以下两种方式：

 

使用mousewheel和unmousewheel事件函数；

使用经典的bind和unbind函数。

$('div.mousewheel_example').mousewheel(fn);  
$('div.mousewheel_example').bind('mousewheel', fn);  

mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event外，还接收到第二个参数delta。通过参数delta可以获取鼠标滚轮的方向和速度。

如果delta的值是负的，那么滚轮就是向下滚动，正的就是向上。

// 绑定方式  
$('#my_elem').bind('mousewheel', function(event, delta) {  
    console.log(delta);  
});  
  
// 事件函数方式  
$('#my_elem').mousewheel(function(event, delta) {  
    console.log(delta);  
});