Bootstrap Affix Content scrolls to far up on screen

Question

I use the basic Bootstrap Affix method to scroll to sections when clicking on a list group item.

This all works well.

The issue is, the content's title (anchor) disappears behind the header section of my pages

With fixed Top Navigation, it disappears behind the Menu, if the Top navigation is not fixed, but The WP Admin Toolbar is visible (logged in user), it disappears behind the Admin Toolbar.

Is there any way to set a kind of "Top Margin" for the title (anchor), so it will not scroll that far up?

To xplain better see this screenshots: BEFORE AFTER

I do not use JS but use just simple HTML for it.

Here the Mockup:


    
        
            
            
                
                    Section I
                    Section II
                    Section III
                    Section IV
                    Section V
                
            
            
        
        
            
            
                
                    Section I
                    ...
                    ...               
                
                
                    Section II
                    ...
                    ...                
                
                
                    Section III
                    ...
                    ... 
                
                
                    Section IV
                    ...
                    ... 
                
                
                    Section V
                    ...
                    ...

I have also tried to play with data-offset-top, but that is not even influencing the content, it is intended for the List (where you click to scroll-to)

Anybody has a idea why this is happening and how I could have the "Title" of post (my actual anchors) as the "upper limit" so that "titles" won't disappear behind the Menu/Admin bar?

Appreciated...

This solutions I already tried: Not working, completely out of scope (padding to body won't solve anything here) Bootstrap affix issues with sticky top navigation CSS solution that will break the scroll experience and is not working in my case, I did not try yet the JS solution... Div anchors scrolling too far

Philip Dernovoy · Accepted Answer

Try to combine positive padding-top and the same negative margin-top for .section

$(document).ready(function(){
  $("#nav").affix();
});

.section {
  padding-top: 26px;
  margin-top: -26px;
}
.section:first-child {
  margin-top: 0;
}
#nav {
  width: 170px;
  margin-top: 30px;
}






    
        
            
            
                
                    Section I
                    Section II
                    Section III
                    Section IV
                    Section V
                
            
            
        
        
            
            
                
                    Section I
                    ...
                    ...          
                    ...
                    ...               
                
                
                    Section II
                    ...
                    ...
                    ...          
                    ...                
                
                
                    Section III
                    ...
                    ... 
                    ...
                    ...          
                
                
                    Section IV
                    ...
                    ... 
                    ...
                    ...          
                
                
                    Section V
                    ...
                    ... 
                    ...
                    ...

Bootstrap Affix Content scrolls to far up on screen

Answers (1)

Related Questions