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

2021-01-22 16:32:23 阅读：165 来源： 互联网

标签：function 滚动侧边 window 固定 var scrollTop

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

目前遇到这两种固定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样式不对，这个时候通常是样式冲突或者继承的是父类样式，解决方案：重写固定后的样式！

标签：function,滚动,侧边,window,固定,var,scrollTop
来源： https://www.cnblogs.com/aitree/p/14314041.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

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

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