Mám nasledujúci príklad takmer práce, alechceli by ste dostať odkazy na pravej strane navigačného navigačného panely a prejsť div do hornej časti prehliadača tesne pod navigačným panelom navbar. Funkcia funguje, ak je naďalej vidieť viac odkazov, kontakt odkaz posúva celý div do pohľadu, ale nie na hornú časť stránky (ľahšie sa zobrazí v režime celej stránky)
body {
position: relative;
}
#home {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#about {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#portfolio {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#contact {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://codepen.io/rss81/pens/public/" target="_blank">RSS81</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="home" class="container-fluid">
<h1>Home</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="about" class="container-fluid">
<h1>About</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="portfolio" class="container-fluid">
<h1>Portfolio</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid">
<h1>Contact</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>odpovede:
3 pre odpoveď č. 1Mám na to jedno možné riešenie. Mohli by ste, aby sa dno najviac divilo na výšku celej stránky tak, aby sa posúvala až na vrchol.
Urobil som dno najviac div zaberie celý priestor obrazovky pomocou
min-height:100vh;
body {
position: relative;
}
#home {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#about {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#portfolio {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#contact {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;
min-height:100vh;}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://codepen.io/rss81/pens/public/" target="_blank">RSS81</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right" >
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="home" class="container-fluid">
<h1>Home</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="about" class="container-fluid">
<h1>About</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="portfolio" class="container-fluid">
<h1>Portfolio</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid">
<h1>Contact</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>