滚动后的Javascript粘性div [英] Javascript sticky div after scroll

问题描述

这个问题对这里的许多人来说可能很愚蠢.我在纯 JS 中滚动后制作粘性 div.有些人可能会建议在 jQuery 中制作它，但我对它不感兴趣.我需要的是类似于 this 的东西.这里 div 一直移动到顶部，但我需要它有 60px 顶部.我做了一个脚本，但它不起作用.谁能帮我解决这个问题?

这是我的代码.

HTML

<div id="right"></div>

CSS

#left{向左飘浮;宽度:100px；高度:200px；背景:黄色；}#正确的{浮动:右；宽度:100px；高度:1000px；背景:红色；边距顶部:200px;}

JS

window.onscroll = function(){var left = document.getElementById("left");if (left.scrollTop <60 || self.pageYOffset <60) {left.style.position = '固定';left.style.top = '60px';} else if (left.scrollTop > 60 || self.pageYOffset > 60) {left.style.position = '绝对';left.style.margin-top = '200px';}}

这是我需要实现的.左侧 div 必须在页面加载时具有 margin-top:200px 和 position:absolute.当用户滚动页面时，左边的 div 应该滚动，当它到达 top:60px; 时，它的位置和 margin-top 应该更改为 position:fixed 和 margin-top:60px;

这是FIDDLE

解决方案

CSS

#left {向左飘浮;宽度:100px；高度:200px；背景:黄色；边距:200px 0 0;}#left.stick {位置:固定；顶部:0;边距:60px 0 0}

添加了一个stick类，所以javascript不必做太多的工作.

JS

//设置 onscroll 事件之外的所有内容(每次滚动减少工作量)var left = document.getElementById("left"),//-60 所以它不会跳动停止 = left.offsetTop - 60，docBody = document.documentElement ||document.body.parentNode ||文档正文，hasOffset = window.pageYOffset ！== 未定义，滚动顶部；window.onscroll = 函数 (e) {//跨浏览器兼容的 scrollTop.scrollTop = hasOffset ?window.pageYOffset : docBody.scrollTop;//如果用户从左侧 div 的顶部滚动到 60px如果(滚动顶部> =停止){//粘贴 divleft.className = '棒';} 别的 {//释放divleft.className = '';}}

正在使用 JSFIDDLE

This question maybe stupid for many here. I am making sticky div after scroll in pure JS. Some people may advice to make it in jQuery but i am not interested in it. What i need is something similar to this. Here the div moves all the way to top but i need it to have 60px top. I made a script but it not working. Can anyone help me solve this?

Here is my code.

HTML

<div id="left"></div>
<div id="right"></div>

CSS

#left{
    float:left;
    width:100px;
    height:200px;
    background:yellow;
}

#right{
    float:right;
    width:100px;
    height:1000px;
    background:red;
    margin-top:200px;
}

JS

window.onscroll = function()
{
    var left = document.getElementById("left");



    if (left.scrollTop < 60 || self.pageYOffset < 60) {
        left.style.position = 'fixed';
        left.style.top = '60px';
    } else if (left.scrollTop > 60 || self.pageYOffset > 60) {
        left.style.position = 'absolute';
        left.style.margin-top = '200px';
    }

}

This what i need to achieve. The left div has to have margin-top:200px and position:absolute on page load. When the user scrolls the page, the left div should scroll and when it reaches top:60px; its position and margin-top should change to position:fixed and margin-top:60px;

Here is the FIDDLE

解决方案

CSS

#left {
  float:left;
  width:100px;
  height:200px;
  background:yellow;
  margin:200px 0 0;
}
#left.stick {
  position:fixed;
  top:0;
  margin:60px 0 0
}

added a stick class, so javascript doesn't have to do too much work.

JS

    // set everything outside the onscroll event (less work per scroll)
var left      = document.getElementById("left"),
    // -60 so it won't be jumpy
    stop      = left.offsetTop - 60,
    docBody   = document.documentElement || document.body.parentNode || document.body,
    hasOffset = window.pageYOffset !== undefined,
    scrollTop;

window.onscroll = function (e) {
  // cross-browser compatible scrollTop.
  scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;

  // if user scrolls to 60px from the top of the left div
  if (scrollTop >= stop) {
    // stick the div
    left.className = 'stick';
  } else {
    // release the div
    left.className = ''; 
  }
}

WORKING JSFIDDLE

这篇关于滚动后的Javascript粘性div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！