Question

我在Jquery中写了这个粘性div效果，但想知道用vanilla javascript做同样事情的方法

.stick {
    position: fixed;
    top: 0;
}



$(document).ready(function () {  
  var top = $('#a8').offset().top;
  $(window).scroll(function (event) {
    var y = $(this).scrollTop();
    if (y >= top)
      $('#a8').addClass('stick');
    else
      $('#a8').removeClass('stick');

  });
});

Answer 1

当然，你可以在纯JS中做同样的事情。这是一个简单的例子：

var top = document.getElementById('a8').offsetTop;

window.onscroll = function() {
    var y = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    if (y >= top) {
        a8.className = 'stick';
    }
    else {
        a8.className = '';
    }
};

演示：http://jsfiddle.net/hd3uyf68/1/

请注意，在这个简单示例中，我实际上并未实现addClass/removeClass功能。如果您需要，它很容易添加。

Answer 2

在vanilla JavaScript中：

function ready() {
    var box = document.getElementById('box'),
        top = box.offsetTop;

    function scroll(event) {
        var y = document['documentElement' || 'body'].scrollTop;

        if (y >= top) box.classList.add('stick');
        else box.classList.remove('stick');

    }

    window.addEventListener('scroll', scroll);
}

if (document.readyState == 'complete' || document.readyState == 'loaded') {
    ready();
} else {
    window.addEventListener('DOMContentLoaded', ready);
}

JSFiddle示例：

<强> http://jsfiddle.net/869fqgds/4/

Answer 3

以下是dfsq's answer的改编版本，这是迄今为止我发现的最优雅，最简单的解决方案：

    var myTop = document.getElementById('freeze').offsetTop;
    var origClass = freeze.className;
    window.onscroll = function() {
        var y = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
        if (y >= myTop) {
            freeze.className = origClass +' stick';
        }
        else {
            freeze.className = origClass;
        }
    };

// Note that I barely have javascript knowledge, so the modification, even if it works, might be far from optimal. I'm open to improvements.

主要区别是：

更改了变量名称以避免歧义（请参阅该答案的评论）。
if/else内的其他变量和修改，以便允许将其与已分配现有类的标记一起使用。

剩下的唯一问题是，在div被修复的那一刻，流程中有一种“跳跃”。如果在粘贴的div下方添加任意文本（例如<p>See how I jump!</p>），可以在original jsfiddle中轻松看到这一点。

用简单的javascript滚动的粘滞div

3 个答案:

演示：http://jsfiddle.net/hd3uyf68/1/