关于滚动条滚动到指定位置触发jq事件和html锚点
2017-06-02 11:22
387 查看
html代码:
<div class="div_md" style="height: 38px;background: pink;">
<a href="#a">点击我就会跳到第一段</a>
<a href="#b">点击我就会跳到第二段</a>
<a href="#c">点击我就会跳到第三段</a>
</div>
<h2 id="a" style="width:200px;height: 400px;background: red;">我是标题一</h2>
<h2 id="b" style="width:200px;height: 400px;background: pink;">我是标题二</h2>
<h2 id="c" style="width:200px;height: 300px;background: green;">我是标题三</h2>
jq代码:
$(function() {
$(".div_md a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - 100 + "px"
}, 1500);
return false;
});
//滚动条滚动到指定位置触发下面事件
var getDiv_md = $(".div_md");
var offSet = getDiv_md.offset().top;
$(window).scroll(function(){
if ($(window).scrollTop() > offSet){
$(".div_md").css({"position":"fixed","left":"10px","top":"10px","z-index":"2"});
}else{
$(".div_md").css({"position":"","left":"0px","top":"","z-index":""});
}
})
});
<div class="div_md" style="height: 38px;background: pink;">
<a href="#a">点击我就会跳到第一段</a>
<a href="#b">点击我就会跳到第二段</a>
<a href="#c">点击我就会跳到第三段</a>
</div>
<h2 id="a" style="width:200px;height: 400px;background: red;">我是标题一</h2>
<h2 id="b" style="width:200px;height: 400px;background: pink;">我是标题二</h2>
<h2 id="c" style="width:200px;height: 300px;background: green;">我是标题三</h2>
jq代码:
$(function() {
$(".div_md a").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top - 100 + "px"
}, 1500);
return false;
});
//滚动条滚动到指定位置触发下面事件
var getDiv_md = $(".div_md");
var offSet = getDiv_md.offset().top;
$(window).scroll(function(){
if ($(window).scrollTop() > offSet){
$(".div_md").css({"position":"fixed","left":"10px","top":"10px","z-index":"2"});
}else{
$(".div_md").css({"position":"","left":"0px","top":"","z-index":""});
}
})
});
相关文章推荐
- 关于IOS设备window onscroll滚动条滚动事件不触发的问题
- 关于onScroll事件在IE6下每次滚动触发三次bug说明
- js在页面滚动到一定位置时触发事件?
- js练习之事件切换图片和控制css样式以及指定页面滚动位置
- 滚动条滚动到底部触发事件
- Study Html《如何让DIV固定在页面的某个位置而不随着滚动条随意滚动》
- 关于onScroll事件在IE6下每次滚动触发三次bug说明
- jquery操作滚动条滚动到指定元素位置 scrollTop
- js将滚动条滚动到指定位置的方法
- js监听滚动条滚动事件使得某个标签内容始终位于同一位置
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
- asp.net2003页面触发事件如何控制滚动条的位置
- 不用锚点也可以平滑滚动到页面的指定位置实现代码
- Div 滚动条滚动到指定的位置
- 关于HTML中的滚动条/去掉滚动条
- HTML 中让DIV不随滚动条滚动,使终显示在浏览器的固定位置
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
- jquery操作滚动条滚动到指定位置
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
- 让滚动条滚动到指定位置,带动画效果 jQuery