function bnrSilder() {
if (!$("#head").length && !$("#bnr").length) {//判断是否有这两个节点,没有则返回
return;
}
(function () {//增加平滑滚动事件js
if (navigator.userAgent.toLocaleLowerCase().indexOf('opera') >= 0) return;
var sstag = document.createElement('script');
sstag.type = 'text/javascript';
sstag.async = true;
sstag.src = 'script/SmoothScroll.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(sstag, s);
})();
$(window).scroll(function () {//实现各个图层视觉差滚动与主导航、次导航固定
var bTop = $(this).scrollTop();//获取滚动值
$('.bnr-box').css({
'margin-top':-bTop * 0.48
});
$('.bnr-txt').css({
'margin-top':-bTop * 0.68
});
$('.bnr-btn').css({
'margin-top':-bTop * 0.68
});
$('.warper').css({
"background-position":"50% " + bTop * 0.2 + "px"
});
if (bTop < 200) {
$(".txt-warp").css({
'margin-top':-bTop * 1.5
});
$(".txt-nav-warp").removeAttr("style");
} else {
$(".txt-warp").css({
'margin-top':-240
});
$(".txt-nav-warp").css({
"position":"fixed",
"top":0,
"left":0,
"box-shadow":"0 2px 6px #eee"
});
}
//实现锚点切换的次导航
var idxs = 0;
if (bTop >= 200 && bTop < 577) {
idxs;
} else if (bTop >= 577 && bTop < 1072) {
idxs = 1;
} else if (bTop >= 1072 && bTop < 1165) {
idxs = 2;
} else if (bTop >= 1165) {
idxs = 3;
}
$('.txt-nav li a').eq(idxs).addClass('on').parent().siblings().children().removeClass('on');
if (bTop < 200) {
$('.txt-nav li a').removeClass('on');
}
});
}
JS 视差滚动的一种方法 (非原创)
原文作者:GongChao
原文地址: https://segmentfault.com/a/1190000000439530
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
原文地址: https://segmentfault.com/a/1190000000439530
本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。