html屏幕滚动事件监听,JQuery监听页面滚动事件

2022年05月10日 阅读数:12
这篇文章主要向大家介绍html屏幕滚动事件监听,JQuery监听页面滚动事件,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

一、当前滚动的地方的窗口顶端到整个页面顶端的距离:javascript

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

二、获取指定元素的页面位置:java

$(obj).offset().top;this

三、对页面滚动条滚动的监听:要放在页面加载的时候事件

$(window).scroll(function(event){ ip

});io

四、设置滚动条到指定位置。$(window).scrollTop(offset)console

HTML:结构层event

CSS:样式层function

{

margin:0;

padding:0;

}

.box{

width:100%;

height:1500px;

}

.nav{

width:100%;

height:800px;

background:red;

}emphasized text*

.banner{

width:100%;

height: calc(1500px - 1000px);

background:#000;

}

javascript:行为层

$(document).ready(function(){

//获取banner的高度

var bannerH=$(".banner").offset().top;

// console.log(bannerH);

//滚动事件

$(window).scroll(function(){

//滚动的高度

var scrollTop=$(this).scrollTop();

console.log(scrollTop);

//判断bannerH大于或者等于scrollTop高度

if(scrollTop >= bannerH ){

$(".nav").css("background","#000");

$(".banner").css("background","red");

}else{

$(".nav").css("background","red");

$(".banner").css("background","#000");

}

})

});

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

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

二、获取指定元素的页面位置:

$(obj).offset().top;

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

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

});

四、设置滚动条到指定位置。$(window).scrollTop(offset)

HTML:结构层

CSS:样式层

{

margin:0;

padding:0;

}

.box{

width:100%;

height:1500px;

}

.nav{

width:100%;

height:800px;

background:red;

}emphasized text*

.banner{

width:100%;

height: calc(1500px - 1000px);

background:#000;

}

javascript:行为层

$(document).ready(function(){

//获取banner的高度

var bannerH=$(".banner").offset().top;

// console.log(bannerH);

//滚动事件

$(window).scroll(function(){

//滚动的高度

var scrollTop=$(this).scrollTop();

console.log(scrollTop);

//判断bannerH大于或者等于scrollTop高度

if(scrollTop >= bannerH ){

$(".nav").css("background","#000");

$(".banner").css("background","red");

}else{

$(".nav").css("background","red");

$(".banner").css("background","#000");

}

})

});