Div在固定標題上

1

請提供您的問題描述清楚你的代碼。您的應用程序是否支持引導程序（https://getbootstrap.com/components/#navbar）？

你想要這樣的東西嗎？我有相同的截圖。 http://plnkr.co/edit/gETDDsIiqZXpFa9YtmE5?p=preview

<!DOCTYPE html> 
<html> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
    /* Note: Try to remove the following lines to see the effect of CSS positioning */ 
    .affix { 
     top: 0; 
     width: 100%; 
    } 

    .affix + .container-fluid { 
     padding-top: 70px; 
    } 
    </style> 
</head> 
<body> 

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:100px;"> 
    <h1>Wallpaper</h1> 
</div> 

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> 
<div class="navbar-header"> 
     <a class="navbar-brand" href="#">Header</a> 
    </div> 

</nav> 

<div class="container-fluid" style="height:1000px"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent condimentum, quam vitae congue finibus, mi nulla accumsan tortor, sed lacinia quam purus non eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
     Donec sapien est, aliquam et est vitae, iaculis varius orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam sed augue augue. Fusce ac felis non risus cursus iaculis id quis justo. Praesent in velit 
     accumsan, tincidunt nisi non, finibus justo. Maecenas aliquam elit neque, et mollis erat accumsan at. Ut a mauris in erat accumsan facilisis. 
    </p> 
    <p>Aliquam fringilla semper elit ut convallis. Fusce bibendum ornare felis sit amet fermentum. Nunc quis auctor nibh. Proin viverra, sem vitae posuere semper, erat quam molestie leo, sit amet posuere mi nisl non nibh. Etiam auctor luctus diam ut interdum. 
     Duis erat velit, ultrices in nibh id, molestie lacinia metus. Suspendisse quam est, ultrices ac mi eu, auctor vulputate diam. Vestibulum consequat enim vitae fringilla dapibus.</p> 
    <p>Ut ut lobortis est, eu tempus justo. Morbi venenatis velit eget auctor fermentum. Ut auctor non mauris in tincidunt. Sed gravida mauris vel mattis aliquet. Vestibulum semper ipsum placerat, congue massa at, vehicula nibh. Pellentesque tincidunt, lorem 
     at luctus gravida, diam turpis iaculis mauris, nec venenatis lacus odio vitae elit. Integer ullamcorper sagittis ipsum, ac aliquet mauris tempus at. Nam imperdiet, orci vel tincidunt semper, purus nibh bibendum risus, ac pretium felis dui sed justo. 
     Nunc consectetur venenatis neque, sed sodales lacus egestas nec. Praesent convallis facilisis facilisis. Quisque eget dui faucibus, interdum dolor eu, imperdiet sem. Donec quis ante in dolor accumsan convallis. Donec vel justo ac mauris fermentum 
     vulputate. Curabitur vel nibh quis nisi fermentum hendrerit vitae in ipsum. Sed consectetur purus tristique ante vulputate ultrices.</p> 
    <p>Donec ut sapien nec massa cursus viverra ut at lectus. Pellentesque pellentesque, eros quis venenatis mollis, mi ligula aliquam arcu, sed hendrerit velit nulla efficitur massa. Phasellus laoreet risus nec dictum ultrices. Nam posuere porttitor condimentum. 
     Donec accumsan elit et tortor blandit, a tristique erat porttitor. In quis tincidunt arcu, id semper ex. Suspendisse rutrum sed neque eget dapibus. Pellentesque a urna non urna accumsan feugiat a sed metus. Donec consequat luctus ullamcorper.</p> 
    <p>Aenean viverra ipsum non lorem laoreet, id feugiat leo volutpat. Ut ex erat, cursus non ullamcorper sit amet, ullamcorper sed ante. Curabitur ultricies, magna ac accumsan dictum, odio felis mollis enim, et ultricies arcu justo vel nisi. Suspendisse 
     potenti. Vivamus elit turpis, scelerisque vitae elit vitae, aliquet viverra purus. Phasellus finibus, mauris vel facilisis interdum, ante nisl ullamcorper felis, feugiat hendrerit arcu mi a est. In ut metus a ligula ultrices tincidunt. Praesent 
     ullamcorper sem sapien, ac condimentum erat pellentesque a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum est et massa venenatis interdum. Quisque convallis finibus lectus vitae semper. Vivamus pharetra lacus sed nulla blandit, 
     sollicitudin semper velit auctor. Sed erat enim, aliquet at massa et, dignissim sodales lorem. Aliquam erat volutpat. Cras euismod ligula vitae sollicitudin posuere.</p> 
</div> 

</body> 
</html>

來源

2017-02-09 10:28:34

+0

@Arno Rohner請嘗試讓我知道。 –

+1

你可以通過這個鏈接http://www.w3schools.com/Bootstrap/bootstrap_affix.asp –

+0

我試過了，它的工作原理，謝謝。 – Lahzey

0

我WASS這個周圍fideling FRO分鐘的CUPLE和我認爲我manged得到我的工作，他們的方式你想要的。這個例子是建立在bootstrap之上的，但是它能夠應用最多的東西。 Jsfiddle

jQuery的

$(window).scroll(function() { 
    if ($(document).scrollTop() > 50) { 
    $('nav').addClass('shrink'); 
    } else { 
    $('nav').removeClass('shrink'); 
    } 
});

CSS

nav.navbar{ 
    top:30px; 
    background-color:#ccc; 
    // Animation 
    -webkit-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
} 

nav.navbar.shrink { 
top:0px; 
}

來源

2017-02-09 10:25:21 Linushg111

0

這裏是coomplet代碼，如果你需要，只是

<!DOCTYPE html> 
<html> 
<head> 

    <script> 
    $(window).scroll(function() { 
    if ($(document).scrollTop() > 50) { 
     $('nav').addClass('shrink'); 
    } else { 
     $('nav').removeClass('shrink'); 
    } 
    }); 
    </script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
    </script> 
    <style> 
    nav.navbar{ 
    top:50px; 
    background-color:#ccc; 
     // Animation 
     -webkit-transition: all 0.4s ease; 
     transition: all 0.4s ease; 
    } 

    nav.navbar.shrink { 
    top:0px; 
    } 

    </style> 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
    </script> 
    <title></title> 
</head> 
<body> 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <strong>Navigation bar</strong> 
     </div> 
    </nav><br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
    <br> 
</body> 
</html>

來源

2017-02-10 09:01:12 Linushg111

Div在固定標題上

回答

相關問題