【问题标题】:How to convert this jQuery code to plain Javascript (HTML Affix)?如何将此 jQuery 代码转换为纯 Javascript(HTML Affix)?
【发布时间】:2020-09-29 09:11:38
【问题描述】:

有人可以帮我把这个 jQuery 代码转换成纯 JS 吗?这是当您向下滚动页面时,导航菜单将被固定。

$(document).ready(function() {
    var mainMenu = $('.primaryNav').offset();
    $window = $(window);
     $window.scroll(function() {
        if ($window.scrollTop() >= mainMenu.top) {
            $(".primaryNav").addClass("affix");
        }
        else {
            $(".primaryNav").removeClass("affix");
        }
    });         
});

【问题讨论】:

  • 我投票结束这个问题,因为堆栈溢出不是代码移植服务

标签: javascript html jquery affix


【解决方案1】:

我们来了

const nav = document.querySelector('.primaryNav');
const mainMenuTop = nav.getBoundingClientRect().top;

window.addEventListener('scroll', function(e) {
   if (window.pageYOffset >= mainMenuTop) {
    nav.classList.add('affix');
   } else {
    nav.classList.remove('affix');
  }
});

【讨论】:

    猜你喜欢
    • 2020-05-07
    • 2020-07-24
    • 1970-01-01
    • 2012-03-08
    • 1970-01-01
    • 2021-08-01
    • 2019-11-30
    • 1970-01-01
    • 2015-01-03
    相关资源
    最近更新 更多