关于滚动条滚动到指定位置触发jq事件和html锚点

来源:互联网 发布:ubuntu arm版 编辑:程序博客网 时间:2024/06/05 20:50



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":""});
}
})
});


原创粉丝点击