I have managed to make a dropdown for a website I am designing and I'm a bit stuck on the sticky header part..
My header has the sticky effect however when i scroll down the header does not stick to the top of the page. It always maintains a margin of 80px from the top as i mentioned in the CSS.
How can i make the header stick to the TOP when i scroll and when i scroll back to the top of the page it should retain its original position. Hope i have made myself clear.
Just pasting my CSS as the HTML is too lengthy in the fiddle.
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
z-index:9998;
position:relative;
}
Check this fiddle for a DEMO I have created.
EDIT: Just to be clear. I want the top:80px to be there initially. I only want the header to stick to the top while scrolling. EXAMPLE
Here you go.
WORKING DEMO
Changes in CSS:
#nav {
position:fixed;
top:-40px;
}
You have some conflicting styles you need to get rid of:
http://jsfiddle.net/5GqYh/4/
Firstly, you had top inline your header, so I set it to 0.
I also adjust the top margin on your menu, that was also pushing it down.
Try these:
Remove this from ur css to make the header stick to the top.
#nav {
..
margin:40px auto;
..
}
2.css style for header - position:relative will do instead of position:fixed.
3.Put the content div inside another div and create a scrollbar only for that div. In that way, your header will always stick to the top.
Create a .sticky class on your CSS that makes the element's position fixed, then you can easily detect if the user scrolled enough to make it stick to the top, at which point you add the .sticky class to the element. Of course when the user scrolls all the way back you should remove the class. Example:
function stick() {
var stickyNavTop = $('.nav').offset().top;
var scrollTop = $(window).scrollTop();
if(stickyNavTop > scrollTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
}
$(window).scroll(function() {
stick();
});
Related
I have an anchor tag as follows:
A Guide
It navigates to a section that has the id 'map_4D85448A3D4C4180A02BD6FC387ABC45'. The jumptosection function is as follows:
function jumptosection(id) {
var target = document.getElementById(id);
if(document.all){
document.documentElement.scrollTop = target.offsetTop;
}else{
var top = 0;
do {
top += target.offsetTop || 0;
target = target.offsetParent;
} while(target);
document.body.scrollTop = top ;
}
//$('#article').css.paddingTop = '55px';
return false;
But even if I write nothing in this function, the behaviour is still the same. The problem is that I have a header strip of 92px that hides some part of the section when I click on the given anchor. How do I make it scroll to the given section while adding some pixels to escape the header?
While the chosen answer serves the purpose, we now have explicit CSS property for this, called scroll-margin.
Basically, you avoid any trickery by adding unnecessary elements - this margin is just calculated when you navigate via anchor tag (or if you have set up native css scroll snapping - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts).
Using this with CSS variables is really useful. Here's an example if you have a fixed / sticky header:
/* Set the header variable */
--h-header: 50px;
/* Set the scroll margin top on all anchor elements by using .anchor class */
/* Note: I'm setting plus 2.5em so the element has some breathing room on the top */
.anchor {
scroll-margin-top: calc(var(--h-header) + 2.5em);
}
MDN Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin
CSS-Tricks guide: https://css-tricks.com/almanac/properties/s/scroll-margin/
It is possible. I would do it without javascript, so it works for all. Even no changes on you JS are needed.
You just need to create an empty element above the element you want to scroll to. The CSS does the magic. It creates a hidden box in the height of you offset:
HTML:
<span class="anchor" id="map_4D85448A3D4C4180A02BD6FC387ABC45"></span>
<h1>Element to scroll to</h1>
CSS:
.anchor {
display: block;
height: 92px;
margin-top: -92px;
visibility: hidden;
}
See a working demo here:
https://jsfiddle.net/eczxm1rs/1/
I have a side bar div that is fixed until a certain scroll/page height and then it becomes position:absolute.
My problem is that, when it loads in, it's at the right position and height, until I scroll and then it moves (partly due to the jQuery function). When it moves however, it makes it so it doesn't stop at the footer, but instead continues past it.
I am building this on a COS so I can't exactly recreate the problem in JSFiddle, but I can link you to the page.
CSS
/*fixed/absolute div*/
.widget-type-post_listing{
right:0;
width:50px;
position:absolute;
display;block;
background:yellow;
height:50px;
}
jQuery
$(function(){
var container = $('.widget-type-post_listing');
var minTop = $('.header-container-wrapper').outerHeight();
var maxTop = $('.footer-container-wrapper').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Here is the JS Fiddle showing a working example: JSFiddle. You can see that the yellow box (fixed/abso.div) will stick on page until scrolling to footer.
As I said above, to see the exact problem, visit the working page: Working Page
Thanks for the help everyone!
You can add a div in between footer and header surrounding the yellow div 100% width position relative and then fix the max-height of that div and set it's display to inline-flex or inline-block. I think that should so the job.
Cover-div{
width: 100%;
display: inline-flex;
position: relative;
}
I have this off-canvas navigation: http://codepen.io/anon/pen/IcBis.
How do I make it scrollable like this one: http://codepen.io/jdigi/pen/nafJc ?
I only know how to make mine scrollable with scrollbar, but it still acts as a seperate element, rather than merged with rest of the body. Thanks!
Change the menus positioning from fixed to absolute. And to achieve full height, set the body's positioning to relative.
Updated code
You've (accidentally?) applied the fixed CSS rule to the #menu element.
The fixed CSS rule "nails" a block element to the viewport and keeps it from being scrollable.
This is ideal for watermarks but, I guess, not what you've intended.
Replace
#menu {
position: fixed;
with
#menu {
position: absolute;
That'll fix your problem.
I'm trying to create an effect where I display a big logo on page load. When the user scrolls pass the logo and navigation, I want to display a fixed nav bar with a smaller logo. I then want to hide the big logo so that when the user scrolls to the top they still see the fixed nav bar (i.e. the big logo and original navigation stay hidden).
However, when I remove a big block element with the .hide() property it causes the page to "jump" as the display:none property gets set. This reduces the usability of the page, as the location jumps the size of the element that was removed, potentially confusing users.
Is there a way I can get the effect I want, while still providing a smooth experience to the user? I've been thinking of potential options, but have been drawing blanks. Hoping you guys can inspire me :)
A simple JS fiddle can be seen here: http://jsfiddle.net/darudude/vA5WG/ (Note: You'll have to increase the result section to 720+px to get it to work properly - I'm still working on the responsive part)
The code in question:
function UpdateTableHeaders() {
var menu = $(".main_nav_menu"),
offset_top = menu.offset().top;
var scrollTop = $(window).scrollTop();
if (scrollTop > (offset_top + menu.height()))
{
$(".clone").addClass("floating_header");
$(".big_logo").hide();
}
}
$(window).scroll(function(){
UpdateTableHeaders();
});
You can try this ,
Add a new style
<style>
.hide {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
</style>
And change your JS to
$(".big_logo").addClass('hide');
Instead of
$(".big_logo").hide();
Use visibility:hidden then
$(".big_logo").css('visibility','hidden');
Maybe it is because a different browser - margin/padding thing. Have you tried to add this to the body element (or to the container element if it inherits some margins/paddings)
body{
margin:0;
padding:0;
width:100%;
}
I've recently been using Twitter Bootstrap, and I've been loving it.
I've created a navbar that is fixed to the top, and inside it is my logo, a header, a few links, and a dropdown that says "Jump to:". Upon clicking on the dropdown, a menu comes down with four links to a section within the page. All of the links work.
My problem is that because the header of each section is now placed at the top of my page, my fixed navbar blocks it. Is there anyway I can stop this from happening? A bit of jQuery or something?
This is my website: fishyfishy2014.gweb.io. Thanks in advance.
I think you are asking about an anchor jump, which will place the matching anchor to the top of the viewport and "under" the fixed nav. I had a similar issue and used this code:
/* fixing anchor jumps */
var nav_height = 77; // pixels
$(window).bind('hashchange', function(e){
if($(location.hash).hasClass('anchor')){
scrollBy(0, nav_height);
}
return false;
});
$(document).ready(function(){
if($(location.hash).hasClass('anchor')){
$('html,body').animate({
scrollTop: $(location.hash).offset().top - nav_height - 10
}, 10 );
}
});
You just have to add the anchor CSS class to any element, you want be able to jump to.
You need to set this:
body { padding-top: 70px; }
This is coming from the Bootstrap docs itself
Body padding required The fixed navbar will overlay your other
content, unless you add padding to the top of the . Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
You can check here
The following works without any JS:
a:not([href]):before {
display: block;
content: "";
height: 60px;
margin: -60px 0 0;
}
a:not([href]) assumes that your anchors don't have a href attribute. Change both occurrences of 60px to a value of your choice.
Actually, 2ndkauboy's solution does work. In short:
get rid of the 'px' in nav_height variable (...as you said)
use the anchor css class (...as 2ndkauboy said) but DONOT use it on the <a> tag but on the <div>, as follows:
click here
... other code here ...
<div id="jump_here" class="anchor">
... content ...
</div>
Hope it helps.
In CSS, there is also the scroll-margin-top property that sets the element's scroll margin to the top side.
You need to apply to anchored element a class, for exemple .anchor
After that, you can apply this :
.anchor {
scroll-margin-top: 77px;
}