Question

很抱歉，但我是js的完整菜鸟。

我正在使用bootstrap来尝试构建我的第一个站点。

该网站有一个固定的顶部导航栏。

我想更改导航栏的边框底部属性，当它到达标题div的底部时（页面下方约为480 / 500px）。

目前边框底部是白色的，但我想在滚动超过某个点（标题的底部）时将其更改为蓝色，然后再次向上滚动时更改为白色。

我想要的效果是当滚动过去时，固定导航的外观“拾起”横幅部分的下边框。

我已经为导航栏div提供了id="n1"的ID，并创建了一个类.navbar1{border-bottom: 1px solid rgba(46,152,255,1)!Important;}以添加到现有的CSS中。

我没有使用jquery，因为我没有使用太多的js而且我不想仅仅为了一些事情而调用它 - 它是大文件。

我尝试了各种各样的事情但没有成功。

可能是因为他们依赖于Jquery？我不知道。

例如，最后一个是：

$(window).scroll( function(){
    if($(window).scrollTop() > 50) $("n1").addClass("navbar1");
    else $("n1").removeClass("navbar1");    
});

无论如何，我希望有人可以帮助我使用普通/纯js来改变属性属性，如上所述。

提前感谢你的帮助。

修改

以下是友好的答案。

但是鉴于一些评论，我认为澄清我对JS的使用可能是有用的。

我的网站需要很少的JS功能，所以我选择内联我的JS，而不是调用外部JS文件或文件 - 例如jquery.js和bootstrap.js这些文件相对较大。

虽然我失去了缓存JS的好处，而且我的html略大，但我很乐意这样做，因为在我的案例中我觉得这些损失超过了增加的弥补初始页面加载速度来自：

（a）无需提出额外的http请求;和

（b）无需加载相对较大的文件。

当然不适合所有人，但我觉得这适合我的情况。话虽如此，当一切都完成并且我的网站启动并运行后，我可能会做一些测试，看看自定义外部JS文件是否再好一点。

基本上，我只使用Bootstrap来实现其CSS功能，而不是它的JS功能。

我希望这是有道理的。

Answer 1

这demo可能对您有所帮助！它没有使用jQuery。

这里是代码javascript：

window.onscroll = function() {
    var nav = document.getElementById('nav');
    if ( window.pageYOffset > 100 ) {
        nav.classList.add("navbar1");
    } else {
        nav.classList.remove("navbar1");
    }
}

Answer 2

我对@ radonirina-maminiaina了不起的答案做了一点改动。

虽然可行，但我还是希望避免在onScroll事件期间进行不必要的DOM调用。 onScroll事件可能在某些设备上经常触发，因此最好保持其处理程序尽可能快。

在我的解决方案中，我将nav DOM元素缓存在闭包上，并且仅在偏移量发生变化时才更新其类。

window.onscroll = function () {
  let isScrolled = false
  const scrollPoint = 100
  const nav = document.getElementById('navbar')

  function onScroll () {
    if ( window.pageYOffset > scrollPoint && !isScrolled ) {
      nav.classList.add("scroll");
      isScrolled = true
    } else if (window.pageYOffset <= scrollPoint && isScrolled) {
      nav.classList.remove("scroll");
      isScrolled = false
    }
  }
  
  onScroll()  // Makes sure that the class is attached on the first render
  return onScroll
}()

JS（No Jquery） - 滚动到设定点时更改CSS

2 个答案: