Question

因此，我在第一部分中的背景图片位于导航栏后面及其下方。基本上我想要的是，当我滚动到页面顶部时，我希望导航栏的背景消失，但不是导航栏中的列表项。当我向下滚动时，我希望导航栏上的背景重新出现。我相信这需要jquery，就像if / else语句，我根本不熟悉。另外，如果我需要添加jquery，我是否需要在HTML中的任何位置添加CDN？如果是这样，我在哪里放置它？如果它有任何区别，我使用bootstrap来制作我的导航栏。我只有几天的编码，我是全新的。这是我的HTML和CSS

＆＃13;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jfdimarzio.test1.MainActivity">

    <Button
        android:id="@+id/btn_send"
        android:layout_width="349dp"
        android:layout_height="54dp"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="12dp"
        android:text="Send"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="441dp" />



    <TextView
        android:id="@+id/txtview_display"
        android:layout_width="348dp"
        android:layout_height="355dp"
        android:layout_marginTop="15dp"
        tools:layout_editor_absoluteX="16dp"
        tools:layout_editor_absoluteY="16dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

＆＃13;

Answer 1

添加一些jQuery，告诉导航添加和删除类，如果用户是否滚动到顶部：

$(window).on("scroll", function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos <= 0) {
        $('.navbar-default').addClass('top-of-page');
    } else {
        $('.navbar-default').removeClass('top-of-page');
    }
});

现在使用CSS根据添加和删除的新类更改背景：

.navbar-default{background-color: black;}
.navbar-default.top-of-page{background-color: transparent;}

您的示例中是否有使用这么多！重要标签的原因？

编辑：你也可以找到这个有用的 - PHP S2I documentation

Answer 2

您可以使用vanilla JavaScript轻松完成此操作，如果您不想添加它，则无需使用JQuery。一种方法是将导航栏上添加/删除类的事件绑定到窗口滚动事件，如下所示：

function toggleScrollClass() {
  var nav = document.querySelectorAll('.navbar-default')[0];
  window.pageYOffset > 0 ? nav.classList.remove('fade') : nav.classList.add('fade')
}
window.addEventListener('scroll', function() {toggleScrollClass()});
toggleScrollClass();

然后在CSS中创建一个.fade类来做与后台不同的事情：

.navbar-default.fade {
  background-color: transparent !important;
}

你甚至可以在导航栏中添加一些CSS过渡/动画效果，这样你就可以获得漂亮的过渡效果而不是跳跃效果。这是一个例子：https://codepen.io/anon/pen/ZXyNNe

如何在向下滚动时显示导航栏背景，但在向上滚动时消失

2 个答案: