I want
A site banner with a navbar below
The banner to disappear when scrolling down, but the navbar to
remain fixed
I found this jsfiddle which provides the above solution:
http://jsfiddle.net/DTcHh/541/
Two main points of code:
//js
$('#topnavbar').affix({
offset: {
top: $('#banner').height()
}
});
//css
#topnavbar.affix {
position: fixed;
top: 0;
width: 100%;
}
My problem now is when you scroll down to the point where the 'affix' happens. If you look carefully at that point it kinda jumps, and now the navbar is overlapping the first 4 lines in the paragraph
Any ideas how to get rid of that overlap?
You need to displace the fixed .navbar element by adding padding-top to the body element equal to the height of the fixed element.
You can listen to the affix.bs.affix/affix-top.bs.affix events and then determine whether the padding should be equal to the element's height or removed:
Updated Example - the jump you were seeing no longer occurs.
$('#topnavbar').on('affix.bs.affix affix-top.bs.affix', function (e) {
var padding = e.type === 'affix' ? $(this).height() : '';
$('body').css('padding-top', padding);
});
Add "z-index:10;" to your topnavbar.affix class in css.
position: fixed;
top: 0;
width: 100%;
z-index:10;
Related
I have my menu all set, good to go, and the JS I have at the moment doesn't have the page jumping all over the place which is good. The problem I am having, is getting my "fixed" navigation to slide up/down, instead of just appearing out of nowhere.
Currently the jQuery I have is activating a class at about 300px~ down the screen, which changes the menus position from relative to fixed.
Please note: I originally managed to get this working with static positioning, but was having a hard time with the z-index and some other elements on my site, so I would like the positioning to remain relative (not static). I also do not want to duplicate the menu in any way with javascript (have seen some examples doing that).
How can I use jquery, or css to achieve both the slidedown and slideup effect when the menus position changes to fixed?
My codes below, thankyou very much.
HTML:
<div class="nt-main-navigation-sticky">
<!-- my nav, logo, etc, is in here. -->
</div>
CSS:
.nt-main-navigation-sticky {
position: relative;
}
.activeScroll .nt-main-navigation-sticky {
position: fixed;
top: 0;
left: 0;
}
JQUERY:
// get my header height
var getHeaderHeight = $('.nt-main-navigation-sticky').outerHeight();
// add/remove body class
$(window).scroll(function() {
if($(window).scrollTop() > getHeaderHeight + 200) {
$('body').addClass('activeScroll').css('padding-top', getHeaderHeight);
} else {
$('body').removeClass('activeScroll').css('padding-top', 0);
}
});
Add a transition to your css:
.nt-main-navigation-sticky {
position: relative;
}
.activeScroll .nt-main-navigation-sticky {
position: fixed;
top: -50px; // or whatever the height of the navbar
left: 0;
transition: top 600ms;
}
and js:
if($(window).scrollTop() > getHeaderHeight + 200) {
$('body').addClass('activeScroll').css('padding-top', getHeaderHeight);
$('.nt-main-navigation-sticky').css('top', '0px'); // will trigger transition
} else {
$('.nt-main-navigation-sticky').css('top', '-50px'); // will trigger transition
$('body').removeClass('activeScroll').css('padding-top', 0);
}
So I am trying to build a sidebar which sweeps in from the left of the screen. I have the menu element floating left with a width = 40% and margin-left = -40%.
When I swipe or press the button for the sidebar to appear, the pages resizes itself and zooms out to accommodate the sidebar. I can stop this happening if I stop the container from having a width of 100%, however, I want the content to be the full width of the page.
This is how I'm moving the sidebar:
$("allContainer").animate({left: '40%'});
I have my the code here on JSFiddle.
Thank you for any help :)
It's because you are animating the container allContainer that also holds your content so everything is moving left. Just animate the sidebar in.
Fiddle: http://jsfiddle.net/bc4kau0w/3/
CSS:
#sidebar {
width: 40%;
height: 100%;
float: left;
background: blue;
margin-left: -40%;
position: absolute;
}
button {
float: right;
}
JS:
var isMoved = false;
$("button").click(function() {
if (isMoved) {
$("#sidebar").animate({
left: '0px'
});
} else {
$("#sidebar").animate({
left: '40%'
});
}
isMoved = !isMoved;
});
And in case I misunderstood and you don't want the sidebar to cover anything here is a fiddle showing your content shrinking when the sidebar expands so nothing is covered. Either way the main issue, as I saw it, was animating the allContainer instead of the smaller pieces within it.
Fiddle: http://jsfiddle.net/bc4kau0w/4/
(I am looking for an HTML/CSS fix but if there really is none then JS (prefereably JQuery) works for me)
I have two main divs inside my page, I have the #maincontent and the #footer.
Basically, I want the footer to always sit at the bottom on the page:
#footer{
position:fixed;
bottom:0;
}
BUT I do not want it to overflow on the #maincontent when the page is too small.
For the sake of the question the page can be thought of as simple as:
<body>
<div id="maincontent">Dynamic Content</div>
<div id="footer">StaticContent</div>
</body>
My problem is that I can do one or the other, either I fix it to the bottom of the page but when I make the viewport < (footer + maincontent) the footer sits on top of the content. I want the footer to always be at the bottom of the page but disappear off page before it overtakes the main content.
Add a class to the footer with jQuery that changes it to position: absolute when the viewport is too small.
$(document).ready(function() {
var height = $(window).height();
function windowHeight() {
height = $(window).height();
}
windowHeight();
$(window).resize(function() {
windowHeight();
});
if (height < 600) { //arbitrary height value you can set yourself
$('#footer').addClass('not-fixed');
} else {
$('#footer').removeClass('not-fixed');
}
});
If you know your footer's height whatever happens to the window height, or its content :
Just add a "padding-bottom" to your body or main content that matches the footer's height.
If you don't know your footer's height. This is trickier, as you will probably need some javascript to calculate the height of the footer, the height of the main content, compare the sum of both with the window height, and if it doesn't fit, add some adequate bottom padding to the body / main content.
EDIT :
Ok I understand, I think this jsfiddle should do the trick : http://jsfiddle.net/ah4XA/2/
The javascript would be :
$(document).ready(function () {
function updateFooter () {
var footerH = $("#main-footer").height();
var contentH = $("#main-content").height();
var windowH = $(window).height();
if ( contentH + footerH > windowH) {
$("#main-footer").removeClass("fixed");
} else {
$("#main-footer").addClass("fixed");
}
}
$(window).resize(function () {
updateFooter();
});
updateFooter();
});
If I understand what you're looking for, you want the footer to stay on the bottom of the window regardless of the page content, but also not overlap the page as the window is resized vertically.
One possible solution is to switch between position:absolute; and position: fixed; with a media query. So past a certain height it's fixed, but below that the footer position:absolute;.
EXAMPLE FIDDLE
CSS:
#media all and (max-height:300px) {
#footer {
background: red; <- added for testing
position: absolute;
}
}
The only drawback to this approach is that you need to know the height to set the switchover to. This may be tricky, but position:fixed;.
The simplest solution would be to position footer at the bottom permanently and increase the z-index of your maincontent so that it comes over the footer if window size is decreased.
NOTE: This is not the only way to do this.
JSFIDDLE DEMO
Sample CSS
#maincontent{
height : 400px;
background-color : green;
/*
position : relative is added to enable z-index.
*/
position:relative;
/*
z-index will bring it above footer,
if window size is reduced.
*/
z-index: 1;
width : 100%;
}
#footer{
height : 100px;
width : 100%;
background-color : black;
/* Below two properties will
postion footer at the bottom of the page.
*/
position : fixed;
bottom : 0;
color : white;
}
You should play with CSS position property to get this done.
EDIT:
Here is another CSS solution :
The maincontent and footer are wrapped in a bodyContainer div its position is set to relative and then footer is positioned w.r.t it.
JSFIDDLE DEMO 1 Footer is below body and not shown.
JSFIDDLE DEMO 2 Footer is shown since body height is less.
HTML
<div id="bodyContainer">
<div id="maincontent">Dynamic Content
</div>
<div id="footer">StaticContent</div>
</div>
CSS
#bodyContainer {
min-height: 100%;
position: relative;
}
#maincontent{
height : 800px;
background-color : green;
padding-bottom: 60px;
width : 100%;
}
#footer{
background-color: black;
bottom: 0;
color: #FFFFFF;
height: 48px;
position: absolute;
width: 100%;
}
I have a situation where I need to make a div the same size as an absolutely positioned sidebar. I sorted that using this bit of jQuery;
$('#main').height('auto');
top_height = $('.toolbar').outerHeight();
side_height = $('#RightSideBar').height();
body_height = $('#main').innerHeight();
console.log(body_height + ' ' + side_height);
if (body_height < side_height){
$('#main').height(side_height + top_height);
}
else {
$('#main').height(body_height);
}
I have ran into a new problem due to the dynamic nature of some content on some pages. Since the height of #main is absolutely set if the size of its content increases the size of the div will not increase with it and vice versa.
I need the div to be set the same height as the sidebar and remain fluid with its content. So the div would increase and decrease in height up to the height of the sidebar.
I hope that is easily understandable, if its not please say so.
instead of setting the height of #main with your calculations, try setting the min-height:
if (body_height < side_height){
$('#main').css('min-height', side_height + top_height);
}
else {
$('#main').css('min-height', body_height);
}
You can do this without javascript. You need a relative positioned parent that will auto size to side bar and then an absolute positioned div that adopts 100% height of parent. Never is there a set height, always fluid.
DEMO http://jsfiddle.net/nSBaA/1/
#wrapper {
position: relative;
}
#main {
position: absolute;
height: 100%;
width: 70%;
}
#sidebar {
float: right;
width: 20%;
}
I'm having trouble keeping the .content div's scroll pinned to the bottom when resizing the page vertically, i.e., When the footer moves upward during a user resizing the screen, the word "window" should be the absolute last thing to move out of visibility. The footer should push the words "Just Some Text" into the scrollable content, while "Window" should remain visible and atop the footer div. Right now, however, the opposite occurs: when the page is resized, footer moves upwards covering the words "window" followed by "the," then "of," etc, leaving "Just Some Text" visible. Like I said earlier, it needs to be the "opposite" so to speak.
So my question is: How do I continuously keep scroll to the bottom during a page resize?
Here's a fiddle:
http://jsfiddle.net/N672c/2/
I have a basic html structure here for the purposes of this question:
<header></header>
<div id="content_id" class="content">
<div class="container">
Just<br>
Some<br>
Text.<br>
Try<br>
resizing<br>
the<br>
height<br>
of<br>
the<br>
window
</div>
</div>
<footer></footer>
Some CSS as well:
header, footer {
position: fixed;
left: 0; right: 0;
height: 100px;
background: teal;
}
header { top: 0 }
footer { bottom: 0 }
.content {
position: fixed;
top: 100px; bottom: 100px;
left: 0; right: 0;
overflow-y: scroll;
}
.container {
padding: 20px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
And a small amount of javascript:
var $content = $('.content'),
$container = $('.container'),
containerHeight = $container.outerHeight();
$(window).resize(function () {
$container.css({
position: $content.innerHeight() > containerHeight ? 'absolute' : 'static'
});
}).resize();
You can set the scroller to the desired position by using the scrollTop method, which takes one argument, the offset value.
Here you can add a scrollTop method to your 'content' block with an offset of the container block height which is the height you want to keep it as constant.
So add this into your resize function.
$content.scrollTop($container.height());
This'll keep you scrolled to the end on resizing.
Here's a quick check http://jsfiddle.net/4LQnW/6/
In the resize method just add:
$content.scrollTop($content.height());
This will keep $content scrolled to the bottom constantly: http://jsfiddle.net/N672c/4/