Question

所以我想使用Bootstrap创建一个Navbar然后当你向下滚动超过150个像素时，导航栏的背景稍微透明我在Stackoverflow上发现的所有示例都是我需要的：/我知道如何使用jQuery添加类等等，当你向下滚动通过一定高度但是我想让Navbar fadeOut然后用另一个类fadeIn但我还没有找到办法做到这一点。

我很感激任何帮助：）

谢谢，
STE

答案： jQuery的

$(window).on( "scroll", function() {
   $('nav').toggleClass('scrolled navbar-fixed-top', $(this).scrollTop() > 150);
});

CSS

nav.scrolled {
  background: rgba(0,0,0,0.5);
}

nav {
    transition: background-color 0.5s ease;
}

HTML

<nav id="secondNav" class="navbar navbar-default">
    <div class="container-fluid">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Responsive Slider</a>
            </div>
            <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right navText">
                    <li><a href="#">Home</a>
                    </li>
                    <li><a href="#">About Us</a>
                    </li>
                    <li><a href="#">Contact Us</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Answer 1

只需css转换即可进行淡入淡出当窗口达到150px时，您需要做的就是使用jquery toggleClass函数。

尝试以下方法：

$(window).on( "scroll", function() {
   $('#secondNav').toggleClass('scrolled', $(this).scrollTop() > 150);
});

和css

#secondNav.navbar-default{
  background: #000;
  transition: background-color 0.5s ease;
}
#secondNav.scrolled {
  background: rgba(0,0,0,0.5);
}

过渡属性将为您提供淡入和淡出，然后您可以将导航栏默认的背景更改为您想要的任何内容。当它达到150px时，它将切换滚动的类并更改背景。

Answer 2

我有一个困难的解决方案。您可以创建两个var width = 300, height = 300, radius = Math.min(width, height) / 2; var color = d3.scale.ordinal() .range(colorrange); var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(radius - 70); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.value; }); var svg = d3.select("#info").attr("align", "center").append("svg") .attr("class", "piechart") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var g = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); g.append("path") .attr("d", arc) .attr("data-legend", function(d) { return d.data.name; }) .style("fill", function(d, i) { return color(i); }); g.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".35em") .text(function(d) { return d.data.label; }); legend = svg.append("g") .attr("class", "legend") .attr("transform", "translate(50,30)") .style("font-size", "12px") .call(d3.legend)。应该隐藏第二个navbar。当您nav超过scroll时，它应该是150px并且位置固定。我的jQuery代码下面是

fade in

代码下面是第一个导航。

$(window).scroll(function(){
    var scrolled = $(window).scrollTop();
    if(scrolled>149){
       $('#second_nav').fadeIn();
    }
    else{
        $('#second_nav').fadeOut();
    }
});

代码下面是第二个导航。

<nav class="navbar navbar-default">

在jsfiddle

上查看我的实时演示

Answer 3

您使用的是jQuery吗？如果是这样，也许是这样的？

$('#div').click(() => {
    $('#div').fadeOut();


  $('#div')
  .css('background-color', 'green')
  .fadeIn();

});

https://jsfiddle.net/53n2o76g/

使Bootstrap Navbar粘滞

3 个答案: