到目前为止我用 w3.css 构建了这个:
$(function() {
$(window).scroll(function() {
var x = $(window).scrollTop();
var h = $("#navi").height();
var z = $("#topper").height();
if (x >= z) {
//$("#header").hide();
$("#navi").addClass("w3-top");
$("#content").css("margin-top", h);
} else {
//$("#header").show();
$("#navi").removeClass("w3-top");
$("#content").css("margin-top", 0);
}
});
});<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<header class="w3-container" id="topper">
<span>HEADER HEADER HEADER</span>
</header>
<div class="" id="navi">
<div class="w3-bar w3-pink">
<span class="w3-bar-item" style="display: none; width:">SOLI</span>
<div class="w3-dropdown-hover">
<button class="w3-button w3-mobile">1</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button" style="width:">1a</a>
<a href="#" class="w3-bar-item w3-button" style="width:">1b</a>
<a href="#" class="w3-bar-item w3-button" style="width:">1c</a>
<a href="#" class="w3-bar-item w3-button" style="width:">1d</a>
</div>
</div>
<div class="w3-dropdown-hover" id="navi">
<button class="w3-button">2</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button" style="width:">2a</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2b</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2c</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2d</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2e</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2f</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button" style="width:">3</a>
<a href="#" class="w3-bar-item w3-button" style="width:">4</a>
<a href="#" class="w3-bar-item w3-button" style="width:">5</a>
<a href="#" class="w3-bar-item w3-button w3-right" style="width:">6</a>
</div>
</div>
<div class="" id="content">
<img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
<img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
<img src="https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg">
</div>
</body>但问题是，每当我向下滚动内容(鹰图片)时，也会出现滚动，并隐藏在导航栏后面...... 我希望该网站的行为类似于 this page当我向下滚动时。
有人知道在这里做什么吗？ :)
抱歉:dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
最佳答案
很难说出你想要什么，但我想就是这样了。您需要通过 CSS 添加背景并在其上使用 fixed 属性。
$(function() {
$(window).scroll(function() {
var x = $(window).scrollTop();
var h = $("#navi").height();
var z = $("#topper").height();
if (x >= z) {
//$("#header").hide();
$("#navi").addClass("w3-top");
$("#content").css("margin-top", h);
} else {
//$("#header").show();
$("#navi").removeClass("w3-top");
$("#content").css("margin-top", 0);
}
});
});<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body style='background: url(https://assets.pixolum.com/blog/wp-content/uploads/2016/10/focus-stacking-scharfe-bilder-1.jpg) no-repeat center center fixed; background-size: cover; height: 200em;'>
<header class="w3-container" id="topper">
<span>HEADER HEADER HEADER</span>
</header>
<div class="" id="navi">
<div class="w3-bar w3-pink">
<span class="w3-bar-item" style="display: none; width:">SOLI</span>
<div class="w3-dropdown-hover">
<button class="w3-button w3-mobile">1</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button" style="width:">1a</a>
<a href="#" class="w3-bar-item w3-button" style="width:">1b</a>
<a href="#" class="w3-bar-item w3-button" style="width:">1c</a>
<a href="#" class="w3-bar-item w3-button" style="width:">1d</a>
</div>
</div>
<div class="w3-dropdown-hover" id="navi">
<button class="w3-button">2</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button" style="width:">2a</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2b</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2c</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2d</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2e</a>
<a href="#" class="w3-bar-item w3-button" style="width:">2f</a>
</div>
</div>
<a href="#" class="w3-bar-item w3-button" style="width:">3</a>
<a href="#" class="w3-bar-item w3-button" style="width:">4</a>
<a href="#" class="w3-bar-item w3-button" style="width:">5</a>
<a href="#" class="w3-bar-item w3-button w3-right" style="width:">6</a>
</div>
</div>
</body>关于javascript - 如何在不移动内容的情况下删除导航栏上方的元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47697235/