Question

我不是jQuery的忠实粉丝，因为它会导致页面加载的加载时间更长（即使它很小），所以我尽量避免使用jQuery。

我正在尝试将此jQuery代码转换为普通的javascript，有人可以引导我朝正确的方向发展吗？

非工作非jquery javascript

window.onload = function()
{
    var scrolledElement = document.querySelector('#comment');
    var top = scrolledElement.offsetTop;

    window.scroll(function()
    {
        var y = window.pageYOffset;

        if (y >= top)
        {
            scrolledElement.classList.add('fixed');
        } else {
            scrolledElement.classList.remove('fixed');
        }
    });
});

这是jQuery的实际代码。

$(document).ready(function () {  
  var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {

    var y = $(this).scrollTop();

    if (y >= top) {

      $('#comment').addClass('fixed');
    } else {

      $('#comment').removeClass('fixed');
    }
  });
});

这是我到目前为止在jsfiddle中的内容。 http://jsfiddle.net/knjQh/29/

Answer 1

更新您的JS以在滚动

上附加活动

window.onload = function () {
    var scrolledElement = document.querySelector('#comment');
    var top = scrolledElement.offsetTop;
    var listener = function () {
        var y = window.pageYOffset;

        if (y >= top) {
            scrolledElement.classList.add('fixed');
        } else {
            scrolledElement.classList.remove('fixed');
        }
    };
    window.addEventListener('scroll', listener, false);
}

检查

http://jsfiddle.net/raunakkathuria/knjQh/33/

（jQuery to Vanilla Javascript）修复浮动元素

1 个答案: