首页 文章

Wordpress Divi Builder：导航栏在滚动或到达页面上的某个点时从透明变为白色

提问于
浏览 次
0

所以我正在用divi builder重新设计我们公司的wordpress网页，在过去的两天里，我一直在寻找一种让滚动栏在滚动时改变css类的方法 .

我在各种网站上发现了很多关于这个主题的信息，包括stackoverflow，但我似乎找不到特定于Divi构建器的解决方案 .

我试图搞乱从这个链接和其他一些网站提供的html，css和javascript，但我无法让它工作：

http://codepen.io/taylorleejones/pen/KJsvz

HTML：

<nav class="nav">
  <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

CSS：

.nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.nav.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}

使用Javascript：

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    stop = Math.round($(window).scrollTop());
    if (stop > mainbottom) {
        $('.nav').addClass('past-main');
    } else {
        $('.nav').removeClass('past-main');
   }

});

以下是结果如何结果的示例：

https://www.arvato.com/de.html

我希望我们的导航栏做同样的事情，在顶部时是透明的，在向下滚动或到达某个点时变成白色 .

我想我最大的问题是我不知道在divi中添加html的位置 .

在此先感谢您的答案和帮助 .

javascript jquery html css wordpress

2 回答

  • 0

    你现在的滚动脚本需要JQuery，你在网站上有JQuery吗？

    如果您向Nav（“nav”）栏添加ID，这应该可行 .

    window.onscroll = function() {
  showHideNav()
};

function showHideNav() {
  var Nav = document.getElementById("nav")
  if (document.body.scrollTop > 25 || document.documentElement.scrollTop > 25) {
    Nav.className = 'nav past-main';
  } else {
    Nav.className = 'nav';
  }
}

    .nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}

    <nav class="nav" id="nav">
  <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main

















    </div>
<div id="below-main">#below-main</div>

    您可以运行代码段以查看其是否有效 . 您必须将“25”更改为导航栏的高度（以像素为单位） .

    回复于
  • 0

    好的，经过1-2个小时的调试，同事和我设法让它工作 .

    问题是你不能在divi中直接添加html，所以我们使用了一些Javascript来解决这个问题，对CSS进行了一些小的调整，jquery链接处于错误的位置，所以我们把它移到了正确的部分 .

    如果有人在将来需要它，那么这是工作代码 .

    CSS：

    .nav {
    background-color:transparent;
    color:#fff;
    -webkit-transition:all 0.25s ease;
    -moz-transition:all 0.25s ease;
    transition: all 0.25s ease;
    width:100%;
    background-color:transparent;
    padding:1em 0;
}

.past-main {
    background-color:#fff !important;
    color:#444;
}

#main-header {
background-color:transparent;
}

#below-main {
  height:1000px;
  background-color:white;
}

    使用Javascript：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var mainbottom= 100;
$(document).ready(function(){

});
$(window).on('scroll',function(){

    stop = Math.round($(window).scrollTop());
    if (stop > mainbottom) {
        $('#main-header').addClass('past-main');
    } else {
        $('#main-header').removeClass('past-main');
   }

});
</script>

    CSS被添加到Divi ePanel的“Costum CSS”部分，Javascript需要位于“ePanel”的“Integration选项卡”的“Body”部分，而不是Head部分 .

    回复于

相关问题