JS 视差滚动的一种方法 (非原创)

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');
      }
    });
  }
    原文作者:GongChao
    原文地址: https://segmentfault.com/a/1190000000439530
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞