Question

我是这个Bootstrap Affix的新手。当我问这个问题时，我将尝试尽可能清楚：我正在开发这个新网站。在标题中，我的图片在顶部，然后是导航栏。

当用户滚动一定数量时，我希望图片从页面顶部滚动下来，并且希望导航栏“固定”在页面顶部。但是，当用户向后滚动页面时，我希望导航栏返回原处，图片返回原处。

我了解您必须使用类，但是我不知道我应该使用什么类。

有些人可能会将我引到一个外部链接对此进行解释，但是我仍然感到困惑，并且不知道如何在我的编码中实现它。我正在开发的这个网站将是一个个人网站。

感谢您的帮助。如果您必须复制我的代码并以这种方式显示给我，请随时这样做。我只想知道如何使用我的编码。

这是我的编码

<!DOCTYPE HTML>
<html>
<head>
    <link rel="shortcut icon" type="image/x-icon" href="Favicon.ico" />
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <meta name="description" content="Allen Henderson's website">
    <title>HOME | Allen Henderson</title>
</head>
<body>
    <div id="nav-bar-container" data-spy="affix" data-offset-top="200">
        <div id="logo">
            <center><img src="img/navigation-bar-header-img.jpg" /></center>
        </div>
        <ul id="nav-bar">
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">ENTERTAINMENT</a></li>
        </ul>
    </div>
    <div id="main-content">     
        <h3>New Content I Have Added:</h3>
    </div>
</body>
</html>

这是CSS：

@font-face {

    font-family: Hot Sweat;
    src: url(fonts/HotSweat.ttf);
}

@font-face {

    font-family: Rusted Orlando;
    src: url('fonts/rusted_orlando/Rusted Orlando Demo.ttf');
    src: url('fonts/rusted_orlando/Rusted Orlando Demo.otf');
}

@font-face {

    font-family: Kimberly;
    src: url(fonts/Kimberly/Kimberly.ttf);
    src: url(fonts/Kimberly/Kimberly.otf);
}


body {
    margin: 0;
}

#nav-bar-container {
    background-color: #0404B4;
    position: relative;
    top: 0;
    width: 100%;


}

#nav-bar-container.affix {

    position: fixed;
    top: 0;
}



#nav-bar {

    background-color: #0404B4;
    display: block;
    position: relative;
    float: right;
}

#nav-bar li {
    display: inline;
    padding: 10px;
    display: inline-block;
}

#nav-bar li a {
    text-decoration: none;
    font-size: 25px;
    font-family: Hot Sweat;
    color: orange;
    text-align: right;
}

#main-content h1 {
    font-family: Rusted Orlando;
    color: #0404B4;
}

如果您需要其他信息来回答问题，请询问，我会为您澄清。

Answer 1

import java.util.Scanner;
public class Main {
    public static void main(String[] args) {
            System.out.println( "enter the year you want");
            Scanner input = new Scanner (System.in);
            int num1 = input.nextInt();

             if (365 % 4 == 0 && 365 % 100 != 0 || 365 % 400 == 0 )
             {
             System.out.println("its a leap year"); 
             } else { 
             System.out.println("its a common year");
           }
    }
}

//THE JAVASCRIPT HERE IS ONLY TO POPULATE THE PAGE, YOU CAN REMOVE IT.
var pageText = document.getElementById("text-content"); 
//create a loop of text just to populatethe page to get a y-axis overflow 
for(var i = 0; i < 100; i++){
	pageText.innerHTML += "This is the 100 line of page text "+"<br>";
}

#logo{
  	border:1px solid gray;
	width:25%;
	margin:auto;
	background-color:#ddd;
	height:100px;
}
.navbar{
	position:sticky !important;
	top:0;
	background-color:red;
	z-index: 2;
}

<!DOCTYPE HTML>
<html>
<head>
  <link rel="shortcut icon" type="image/x-icon" href="Favicon.ico" />
  <meta name="description" content="Allen Henderson's website">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <title>HOME | Allen Henderson</title>
</head>
<body>

<div id="logo-banner  text-center">
	<div id="logo">
    	<img src="img/navigation-bar-header-img.jpg" class="img-fluid" alt="top-image"/>
	</div>
</div>


<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
 <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Entertainment</a>
    </li>
  </ul>
</nav>


<div class="container-fluid">

<div class="row">
	<div class="col-sm-12" id="main-content">
		<h3>New Content I Have Added:</h3>
		<p id="text-content"></p>
	</div>
</div>

</div>
</body>
</html>

 //NOTE:You can easily do this with jQuery, but it's good to know what's happening under the hood.
 //we'll be doing this with pure javascript.
var pageText = document.getElementById("text-content"); 

//create a loop of text just to populatethe page to get a y-axis overflow 
for(var i = 0; i < 100; i++){
	pageText.innerHTML += "This is the 100 line of page text "+"<br>";
}

//add eventlistener
//this will fire a call backfunction when you start to scroll the page
window.addEventListener("scroll", ()=>{
	var logo  = document.getElementById("logo");
	var myNav = document.getElementById("myNav");
    var logoHeight = logo.offsetHeight;//get the logo height; 
    var pageYaxis = window.pageYOffset;//get the window's y axis

    //check of we've scrolled past the image height;
    if(pageYaxis > logoHeight){
    //this will append bootstraps fixed top class to the nav element 
    	myNav.classList.add("fixed-top");
    }else{
    //this will remove bootstrap fixed top class to the nav element
    	myNav.classList.remove("fixed-top");
    }

})

/*this is the only css we need*/
#logo{
	border:1px solid gray;
	width:25%;
	margin:auto;
	background-color:#ddd;
	height:100px;
}

Answer 2

您要寻找的是position: sticky，其设置为top: 0。 Take a look at this link遍历了CSS。另一件事就是查看整个CSS，这很杂乱，并且有很多冲突的CSS规则，尤其是在display方面。

当用户滚动一定数量时，如何使导航栏自身“固定”在页面顶部？

2 个答案: