Fixed bootstrap header when scrolling down

Question

I work in the bootstrap kernel administration structure and has a main heading at the top of the page and then under the heading below it. I am trying to allow the sub header to be fixed at the top of the page when the user scrolls down so that they can always see this information, but I have problems.

The section that I would like to stick to above is as follows.

<div class="area-top clearfix" > <div class="pull-left header"> <h3 class="title"><i class="icon-group"></i>Dashbord</h3> </div><!--.header--> <ul class="inline pull-right sparkline-box"> <li class="sparkline-row"> <h4 class="blue"><span> Cover Designs</span> 4</h5> </li> <li class="sparkline-row"> <h4 class="green"><span> Video Trailers</span> 5</h5> </li> <li class="sparkline-row"> <h4 class="purple"><span> Web Banners</span> 5</h5> </li> </ul> </div><!--.area-top--> 

and I still tried to wrap this in another div using the navbar navbar-fixed-top classes navbar navbar-fixed-top . But it shot at the top and matched the content that you need to see.

I also tried using simple css by adding position:fixed; into the current div, but this will ruin the bread clusters that I have under it, because it takes it out of the stream.

Is there any way to do this with css only. I know I can hack with jquery, but in my team I am only responsible for css.

Answer 1

position: fixed path here. Can you apply the height to the div you want to fix and apply the margin to the breadcrumbs?

 .area-top{ position:fixed; height:2em; } .breadcrumbs { margin-top: 2.2em; } 

Answer 2

My point is this. When you ask about it:

to fix to the top of the page when the user scrolls down

This means that you need to determine when users scroll. In addition, there is no other way than js / jQuery to detect this kind of action. CSS can be part of the solution by creating a class for an example that will stick to your menu, but you always need a bit of js to determine when to put and remove the class.

Here is an example of how to do this in jQuery:

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script type="text/javascript"> $(window).scroll(function(){ var offset = $('.area-top').offset().top; var top = $(document).scrollTop(); if(top >= offset){ // this is where you should fix you menu $('.area-top').addClass('fixed'); // if you have a css class which fix the element. $('.area-top').css('position', 'fixed'); // if you don't have css class }else{ // this is where you should unfix your menu $('.area-top').removeClass('fixed'); // if you have a css class which fix the element. $('.area-top').css('position', 'inherit'); // if you don't have css class } }); </script> 

Do not forget that for each "extended" action that needs to detect a change in the DOM or for user interaction, you will need some JS or PHP to solve this problem. By "advanced" I mean everything that cannot be initially processed in HTML.

Answer 3

you can use below css in the basement of the navigator.

CSS

 .sticky-top { position: -webkit-sticky; position: sticky; top: 0; z-index: 1020; } 

Add the 'sticky-top' class to the subtitle.

for example: you can see a script that looks like a question. If the second date scrolls, the second menu is fixed at the top.

https://jsfiddle.net/raj_mutant/awknd20r/6/