Sticky Navbar offset to prevent overlap of content - javascript

Currently on my single page site when you click on the Bootstrap navbar menu items it takes you to the section of the page with that div #ID. However, naturally because the top of the navbar lines up with the top of the new section my content is overlapped by the width of the navbar (80px or 50px when collapsed).
Screenshot of issue:
"Ready to book" heading is actually centered in the middle of that div but overlapped by 80px of navbar.
Screenshot showing top of page:
The issue is that I do not wish for the navbar to overlap the content in the section I have linked to. Put in other words, I would like the top of bottom of the navbar to line up with the top of the new section div.
Surely this can be handled using some JS to offset the navbar up by the height of the the navbar?
I have had a suggestion to use CSS to add padding into the top of section but this adds an extra 80px of padding that I don't want, when normally scrolling the page.

Okay so I found two solution to this finally using JS and CSS
here.
My preference is for this CSS solution:
#id:before {
display: block;
content: " ";
margin-top: -80px;
height: 80px;
visibility: hidden;
}
Obviously, replace ID with the ID of the anchor.
The actual JS snippet solution:
var shiftWindow = function() { scrollBy(0, -50) };
window.addEventListener("hashchange", shiftWindow);
function load() { if (window.location.hash) shiftWindow(); }
However, it is still a bit clunky as you can actually see the the browser scroll to the anchor point and then back up by the scrollBy offset amount of 80px.

I am not sure if this problem has been solved yet, but I had the same problem and adding the appropriate heading worked (by appropriate padding I mean the height of your navbar element).
For example:
#id { padding:50px }

Related

Adminlte fixed layout without fixed header

So im using Adminlte with a fixed layout. The thing is I only wanted the sidebar fixed and not the header. So I removed the position: fixed from the main header.
The problem - when scrolling down there is a gap (the size of header) at the top of the sidebar.
I tried this at first :
.fixed .main-sidebar{
padding-top:0;
}
But the problem is if you don't scroll past the heading completely the sidebar jumps under it.
So now I added a function in js to calculate the position and add padding accordingly. Its kinda working but its laggy and probably a bad solution.
$(window).scroll(function () {
var positionNow = $(window).scrollTop();
if (positionNow < 50){
$('.fixed .main-sidebar').css({"padding-top" : 50 - positionNow});
} else {
$('.fixed .main-sidebar').css({"padding-top" : "0"});
$('.main-sidebar').css({"padding-top" : "0"});
}
});
Is there a better way to make the sidebar jump to top?
I realized that the gap is showing because the class main-sidebar includes the logo at top. But making the class .sidebar fixed weirdly doesn't affect sidebar-collapse.
There are two very simple way to achieve this
Remove fixed class from body(Note: It will make sidebar scrollable) or
Add css property position: absolute in main-header class
.main-header {
position: absolute !important;
}
or you can simply add "fixed" to your body on main.php
<body class="hold-transition skin-blue sidebar-mini fixed">

Simple jQuery "push" menu - offset main container and menu but transition timings not correct

I am trying to create a simple off-canvas "push" menu. When the menu trigger is clicked, the menu slides in from the right of the viewport and pushes the main content divs offset by the width of the menu.
The jQuery works (in that is pushes the menu onto the page, and pushes the content off the page) but the animations do not work as expected. There is some "catchup" where the menu moves slower than the main content areas.
I set a transition-delay to fix this issue but it doesn't seem to have had the effect I thought it would.
How do I managed to get the content divs to move offscreen so that it looks like they are pushed by the menu?
Here is an example of my issue: http://codepen.io/anon/pen/GrKJor
Here is my code:
$('.nav-trigger').click(function(){
$('nav').addClass('nav--open');
$('header').addClass('content--pushed');
$('main').addClass('content--pushed');
$('footer').addClass('content--pushed');
});
And here is the CSS for the transition:
nav {
...
right: -300px;
transition: right 0.2s ease-in;
}
.nav--open {
right: 0px;
}
.content--pushed {
position: relative;
right: 300px;
}
The issue is you're attempting to animate a property - specifically, right position - in a way that will only work in your markup structure if the element being animated has a position:fixed.
You can see the desired behavior in this forked CodePen:
http://codepen.io/anon/pen/ygBNXG
(I also added a 'nav-close' button so you can see the inverse & test repeatedly)
By applying a fixed position to the header, main & footer, the transition effect can indeed be animated:
header, main, footer {
position: fixed;
/* other CSS */
}
To account for the fixed position, I've then offset the top position of main & footer based on your defined heights:
main {
top:100px
}
footer {
top:200px
}
Finally, and this is only preference, I made the left position of header, main & footer be what changes (from 0 to -300px) as that seems to more accurately reflect what's happening, which is those elements are being moved off the left edge of the viewport by 300px.
Update
If you don't want to use position:fixed on the elements, you need to modify your markup structure to wrap the header, main & footer elements and place the nav element outside of said wrapper. This is working sans fixed position and heights/offsets here:
http://codepen.io/anon/pen/qREvEB
The revised markup is essentially:
<div class="wrapper">
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
<nav>...</nav>
In this scenario, the positions of the header, main & footer can be reset to relative and the content is all scrollable as needed.

How to use angularjs $anchorScroll on div only if div is hidden?

I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview
In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.
So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?
If you have an other solution than anchors, I take it.
Thank you in advance.
If I understand your question correctly the issue is that when using $anchorScroll your header is either
a: Being covered up by the div scrolled into frame,
or
b Partially covering up the div that is scrolled into frame.
Either way there are two solutions you should review:
First
make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.
.header { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}
REMEMBER Z-index only works on positional elements (See ref)
Second
Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
Update 50 to be the pixel height of your header.
Regarding visibility
There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.
Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.

Trying to integrate the mmenu.js(off canvas menu) into my site, having trouble with my sticky footer

I'm trying to add a off canvas menu into my site and the one I picked was the mmenu(http://mmenu.frebsite.nl/index.php). Everything else other then my footer works. I have a sticky footer in the site and every time the menu is clicked open the footer flys out of position.
For a fixed footer, add the class mm-fixed-bottom:
id="footer" class="mm-fixed-bottom">Goodbye<
Example: http://jsfiddle.net/1eddy87/Lx5ps/1/
I have tried the documented way which says you should use "mm-fixed-bottom" for any fixed elements, however that didn't do the trick.
Documentation: http://mmenu.frebsite.nl/tutorial.php
scroll to the bottom of the page and then open the menu via the header and you will see the footer move out of position.
any ideas??
I realize that I am using absolute, and not fixed. Its a requirement for the sticky footer(http://mystrd.at/modern-clean-css-sticky-footer/). I tried to fix my way through hoping that the mm-fixed-bottom would work, however it didn't. I need a fix for using the absolute.
You've got position:absolute on the footer when it's supposed to be fixed. You're also overwriting the CSS from mm-fixed-bottom. I thought the whole reason for a sticky footer is for it to stay at the bottom of the screen and not move.
I removed all positioning and it worked.
http://jsfiddle.net/Lx5ps/3/
Solution found:
On further inspection, looks like the library changes <div class="mm-page"> to height:100% which screws with height:auto. I toggled it off in browser inspector and it works.
Changed this:
html.mm-opened .mm-page {
height: auto;
overflow: hidden;
position: absolute;
}
http://jsfiddle.net/Lx5ps/4/
Just been having the same problem but I came up with using css calc.
html.mm-opened .mm-page {
height: -webkit-calc(100% - 320px);
height: -moz-calc(100% - 320px);
height: calc(100% - 320px);}
320px being the height of the footer. Calc is pretty well supported. See calc browser support

Sticky Navigation Bar / Right of a Centered Div

I am editing a Squarespace template and would like to create a sticky navigation sidebar.
There's a Squarespace field where I can enter "Custom CSS."
I already have the sidebar, but how do I modify the CSS to make it stick? I want it to remain visible when I scroll below the fold.
My pageBodyWrapper div is centered (auto/auto) and contains both the contentWrapper div and the sidebar1Wrapper div, on the right.
I have tried
#sidebar1Wrapper
{
position:fixed;
}
with either a left or right value in px or %, but whenever I change window size, the sidebar is either going away from the content or overlaps with it.
How do I prevent this from happening?
Can I define my fixed position relative to the contentWrapper div?
Thank you for your help!
Here's the site I am talking about: Last Wave Film.
Unfortunately that functionality is not yet built into css. It is done with javascript. Essentially the javascript detects when the page has scrolled to the top of and then sets the sidebar to position: fixed.
Here's a solution that uses the jQuery library: http://css-tricks.com/persistent-headers/
You can make the sidebar fixed using css and it will be permanently fixed within the browser window.
.sidebar1Wrapper {
position: fixed;
top: 20px;
right: 40px;
}

Categories