Question

我遇到了创建粘性标题的功能问题。

代码是这样的：

function stick() {
var stickyNavTop = headerNav.offset().top;
var scrollTop = window.scrollTop();
while (stickyNavTop> scrollTop) {
    headerNav.className +=("sticky");
}
else {
    headerNav.className -= ("sticky")
}
}

http://jsfiddle.net/6ApJ6/1/

CSS有一个简单的.sticky {position：fixed}

我认为问题出在DOM中，但我不知道如何修复它。虽然我知道jQuery可以更容易地做到这一点，但这样做的目的是学习JavaScript，所以我在纯JS而不是jQuery中寻找答案。还有我可能遇到的任何其他问题，请加以强调，因为他们会非常感激。

提前致谢。

Answer 1

我刚刚做了一个新的函数调用。

   var headerNav = document.getElementById("navbar");
     window.onscroll = function() {
     console.log('scrolled');
  var scrollTop = window.pageYOffset;

  document.getElementById("navbar").style.top =scrollTop+"px";
  }

这个Demo

你也可以设置style.position =＆＃34; absolute＆＃34 ;;在javascript函数中。

Answer 2

const header  = document.getElementById('**HEADER ID**');

addClassHeader = () => {
    header.classList.add("sticky");
}

removeClassHeader = () => {
    header.classList.remove("sticky");
}

window.addEventListener('scroll', function () {
    let getScrollposition = window.scrollY;
    if (getScrollposition > 0) {
        addClassHeader();
    } else {
        removeClassHeader();
    }
});

带有纯JavaScript的粘滞标头，有DOM问题

2 个答案: