JS网站广告实现侧边栏滚动至div顶部后固定、鼠标滚动下拉侧边栏DIV固定

网站或博客经常要挂广告，固定在侧边栏上，每次用到场景都不一样，每次都现找案例，今天把各个场景在这里汇总记录一下！

目前遇到这两种固定div的场景：1、侧边栏滚动至div顶部后固定 ；2、滚动下拉侧边栏DIV固定

场景一、JS 实现DIV 滚动至顶部后固定

代码如下：

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>DIV滚动至顶部后固定</title>
</head>
<body style="height:2000px;">
<div style="height: 200px"></div>
<div id="nav_keleyi_com" style="position:relative;top:0;background:#00f;width:100px; height:100px">
  Test Div
</div>
<script type="text/javascript">
  function menuFixed(id) {
    var obj = document.getElementById(id);
    var _getHeight = obj.offsetTop;

    window.onscroll = function () {
      changePos(id, _getHeight);
    }
  }

  function changePos(id, height) {
    var obj = document.getElementById(id);
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop < height) {
      obj.style.position = 'relative';
    } else {
      obj.style.position = 'fixed';
    }
  }
  window.onload = function () {
    menuFixed('nav_keleyi_com');
  }
</script>
</body>

场景二、鼠标滚动下拉侧边栏DIV固定

一般博客侧边栏高度小于主体内容区时，滚动条滚动到到侧边栏底部时，侧边栏固定。

$.fn.scrollFix = function (opt) {
    var defaults = {
        baseTop: 50, // 初始top值
        main: ".main"  // 主体区选择器
    };
    var settings = $.extend(defaults, opt);
    var $window = $(window),
        $this = $(this),
        windowHeight,
        scrollTop,
        thisHeight,
        $main = $(settings.main),
        mainHeight;
    $window.scroll(function () {
        windowHeight = $window.height();
        scrollTop = $window.scrollTop();
        mainHeight = $main.height();
        $this.each(function (idx, val) {
            thisHeight = $(this).height();
            // 当主体区高度小于侧边栏时不做处理
            if (mainHeight < thisHeight) {
                return false;
            }
            // 当主体区高度大于侧边栏，且下滚高度+窗口高度大于侧边栏高度时，固定侧边栏
            if (scrollTop + windowHeight > thisHeight) {
                $(this).css({
                    position: 'fixed',
                    bottom: "50px"
                    // top: (thisHeight - windowHeight) > 0 ? -(thisHeight - windowHeight) - 30 : settings.baseTop
                    //  left: (idx*100) +"px"
                    // 如果当前元素的高度大于窗口高度，则上移 当前元素高度与窗口高度的差值，
                    // 否则紧贴窗口顶部
                });
            } else {
                $(this).css({
                    position: 'static'
                });
            }
        });
    });

}

　注意：

1、页面不生效，解决办法：首先看看文件路径、然后看是否是延迟加载、最后打开控制台看看是否有语法错误

2、js生效了，div消失了，这种情况我遇到了，打开控制台发现div 的 top:8090 ,所以页面上看不到，固定后修改样式添加：obj.style.top= '10px';

3、固定后css样式不对，这个时候通常是样式冲突或者继承的是父类样式，解决方案：重写固定后的样式！

赞 (0)

相关推荐