I have the following code:
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
$(window).on("scroll",function(e){
var sidepos = parseFloat($('#footer').offset().top - $('#side').outerHeight());
if($(window).scrollTop() > 100 && $('#side').offset().top < sidepos) {
$('#side').css('position','fixed');
$('#side').css('top','0');
}
else if($(window).scrollTop() > 100 && $('#side').offset().top >= sidepos) {
$('#side').css('position','absolute');
$('#side').css('top','' + sidepos + 'px');
}
else if($(window).scrollTop() < 100) {
$('#side').css('position','');
$('#side').css('top','');
}
});
</script>
</head>
<body>
<div id="header"></div>
<div id="body">
<div id="side"></div>
</div>
<div id="footer"></div>
</body>
</html>
I want to keep the #side fixed while scrolling till before the #footer so that it doesn't overlap with it.
Now there are 2 problems:
If you scroll down quickly like pressing 'end' button on keyboard, the function will not execute and the side overlaps with the #footer ignoring the if condition.
After switching to position:absolute can't figure out how to fix again when scrolling up and the #side becomes permanently sticking with the #footer even if you scroll up again.
I created a fiddle for you to test: http://jsfiddle.net/JuD5h/
Here is your updated fiddle: http://jsfiddle.net/JuD5h/4/.
I made some changes to CSS:
#body {
height: 3000px;
position: relative;
}
#side {
width: 100px;
height: 350px;
float: left;
border: 1px solid #000000;
position: absolute;
top: 0;
}
And here is the updated Javascript:
$(function(){ // document ready
var maxAbsoluteTop = $('#body').outerHeight() - $('#side').outerHeight();
var minAbsoluteTop = 0;
$(window).scroll(function(){
var windowTop = $(window).scrollTop();
var actualTop = windowTop - 100;
if ( actualTop <= maxAbsoluteTop && actualTop >= minAbsoluteTop) {
$('#side').css({ top: windowTop - 100 });
} else if (actualTop > maxAbsoluteTop){
$('#side').css({ top: maxAbsoluteTop });
} else {
$('#side').css({ top: minAbsoluteTop });
}
});
});
Use of position: absolute has made the animation flickery but I hope that is something you can fix using a small delay.
Related
I'm trying to make my header disappear when scrolling down and only re-appear when scrolling up. I can't get it to work:
http://jsfiddle.net/mxj562qt/
Any ideas where I'm going wrong?
HTML:
<div id="header" class="custom-header">
This is your menu.
</div>
<main>
This is your body.
</main>
<footer>
This is your footer.
</footer>
Javascript:
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $("#header").outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$("#header").addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$("#header").removeClass('nav-up');
}
}
lastScrollTop = st;
}
CSS:
body {
padding-top: 40px;
}
#header {
background: #f5b335;
height: 50px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -50px;
}
main {
height: 2000px;
}
footer { background: #ddd;}
* { color: transparent}
It would appear that the CSS class doesn't get added but I'm not sure why. Am I referencing the Div in the wrong way?
So, I can see that the issue stems from this bit of code ...
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$("#header").removeClass('nav-up');
}
In my tests, the doc height was always > than the st + window height.
I did this ...
// Scroll Up
console.log('doc height: ', $(document).height());
console.log('st+window height: ', st + $(window).height());
if(st + $(window).height() < $(document).height()) {
$("#header").removeClass('nav-up');
}
// results from scrolling up + down
// doc height: 2058
// st+window height: 313
// doc height: 2058
// st+window height: 280
// doc height: 2058
// st+window height 1614
// doc height: 2058
// st+window height: 1580
Changing the aforementioned JS to this seems to get you where you need to be.
$("#header").removeClass('nav-up');
Then your CSS needed some work ...
I noticed that your top element wasn't applying due to the CSS selector priority.
.nav-up {
top: -50px !important;
}
The result: scrolling down, the nav bar hides, scrolling up, the navbar shows.
I forked your code below;
http://jsfiddle.net/itsbjk/aw6qb2mr/16/
The problem here is with your CSS. You have specified position:fixed; in your code and that bit of CSS overrides all the JS you are writing. Fixed will force your header to be visible no matter what you are doing. Instead, you could try this in your CSS:
body {
padding-top: 40px;
}
#header {
background: #f5b335;
height: 50px;
position: absolute;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
.nav-up {
top: -50px;
}
main {
height: 2000px;
}
footer { background: #ddd;}
* { color: transparent}
The absolute property should make it disappear on scrolling. And also, your referencing of the <div> tag isn't wrong!
The problem has been discussed on the forum a few times however I cannot make it work so I ask for help.
I have a side contact menu (as a widget) in my WP website and made it position: fixed so it doesn't change position during scrolling. However, I want it to stop being fixed before it hits footer div because it just looks weird.
As far as I read I need jquery and a script that changes my fixed position to a relative at some point so I feel like I understand the basic mechanic of it and even found several scripts but all of them doesn't work at all.
I want something exactly like in here:
Stop fixed position at certain div or certain position
I created 3 files: html, css, js and put all the codes from the answer and it just does not work at all..
My js file - java.js
jQuery(document).ready(function() {
var navTop = $('#nav').offset().top;
var navStop = $('#stop').offset().top;
var lastMode = "absolute";
$(window).scroll(function() {
var mode;
if ($(this).scrollTop() >= navTop) {
if ($(this).scrollTop() - navStop + $('#nav').height() > 0)
mode = 'absolute';
else
mode = 'fixed';
} else {
mode = 'absolute';
}
if (lastMode !== mode) {
if (mode == 'fixed') {
$('#nav').css('position', 'fixed');
$('#nav').css('top', '0');
} else {
$('#nav').css('position', 'absolute');
$('#nav').css('top', navTop);
}
lastMode = mode;
}
});
}
My css file- style.css:
#nav {
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 200px;
width: 100px;
height: 50px;
}
#stop {
width: 100%;
background: blue;
height: 300px;
position: absolute;
top: 900px;
margin-top: 20px;
}
My html doc - index.html
<link rel="stylesheet" type="text/css" href="style.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="javascript" src="java.js"></script>
<body style="height:5000px;">
<div id="nav"></div>
<div id="stop"></div>
</body>
Since the code above is just an answer from another topic - I wanted to change it for my needs but it seems I do something wrong because it does not work.
To detail: I want side contact menu <div class="widget-contact"> to start normally like it is right now (position fixed) and stop it from being fixed when it hits
<div id="colophon-inside" class="footer-three">
I am fine using html/css however I do not understand js and I feel my problem is quite easy to solve.
Could you help?
Your code works. You just missed out a ")" at the end of your javascript file. So completing your JS file it should be:
jQuery(document).ready(function() {
var navTop = $('#nav').offset().top;
var navStop = $('#stop').offset().top;
var lastMode = "absolute";
$(window).scroll(function() {
var mode;
if ($(this).scrollTop() >= navTop) {
if ($(this).scrollTop() - navStop + $('#nav').height() > 0)
mode = 'absolute';
else
mode = 'fixed';
} else {
mode = 'absolute';
}
if (lastMode !== mode) {
if (mode == 'fixed') {
$('#nav').css('position', 'fixed');
$('#nav').css('top', '0');
} else {
$('#nav').css('position', 'absolute');
$('#nav').css('top', navTop);
}
lastMode = mode;
}
});
})
Here I say this is "Solved"
https://jsfiddle.net/42muhgj3/1/
$(window).scroll(function() {
const pos = Math.max(5, 200 - $(this).scrollTop());
// maximum 200, minimum 5, according to scrollTop
$('#nav').css('top', pos + 'px');
console.log(pos);
});
css
#nav {
background: rgba(0, 0, 0, 0.5);
position: sticky;
top: 200px;
width: 100px;
height: 50px;
}
I have a div with a social bar at the bottom of the screen on my site but I want to display it only after the user scrolls a little and hide it once the user is about to reach the footer. So around 200px before the page ends.+
This is my div:
<div class="sticky-bar-hr">
.......
</div>
This is my CSS:
.sticky-bar-hr{
display: none;
}
And this is the JQuery I am trying:
<script>
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.sticky-bar-hr').fadeOut();
} else {
$('.sticky-bar-hr').fadeIn();
}
});
</script>
But it does not work. The problem seems to be that the function is not being called. I am setting the script in my homepage HTML in Wordpress
Any help?
Thanks in advance
Try this
$(window).scroll(function() {
var y = $(this).scrollTop();
if(y<200) {
$('.sticky-bar-hr').fadeOut();
}
if (y > 200) {
$('.sticky-bar-hr').fadeIn();
}
if(y+ $(this).height() == $(document).height()) {
$('.sticky-bar-hr').fadeOut();
}
});
body {
height: 2000px;
}
.sticky-bar-hr {
position:fixed;
bottom: 0;
width: 100%;
height: 50px;
background:#000;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky-bar-hr">
This is because you have inverted fadeIn and fadeOut.
Here is a working snippet:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.sticky-bar-hr').fadeOut();
} else {
$('.sticky-bar-hr').fadeIn();
}
});
.sticky-bar-hr{
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sticky-bar-hr">
.......
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
I would like to create vertically a fixed navigation bar for my site. Currently i use the one that has been mentioned on various posts here:
HTML:
<html>
<head>
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'navbar.css' %}">
<script type="application/javascript">
$(document).ready(function () {
var navPos = $('.nav_menu').offset().top; //Sticky navbar
$(window).scroll(function () {
var scrollPos = $(this).scrollTop();
if (scrollPos >= navPos) {
$('.nav_menu').addClass('fixed');
} else {
$('.nav_menu').removeClass('fixed');
}
});
});
</script>
.....
<div class="nav-container">
<div class="nav_menu">
Bars go here
....
And CSS:
.nav-container .nav_menu.fixed {position: fixed; z-index: 10000; top: 0; width: 195px; padding-left: 8px}
This solution works great, the navbar is sticked, in my case the navbar is on the top left side of the page. If i scroll down it perfectly follows the scroll. In case i open the gape using a small window and i stoll down plus right the bar follows (as it should happen). However i would like the bar to only follow vertically, in case someone scrolls left or right the bar should stay where it is.
How can i achieve this?
You can stop the horizontal fixed by applying minus left scroll:
var $window = $(window);
var navPos = $('.nav_menu').offset().top; //Sticky navbar
$window.scroll(function() {
var scrollPos = $window.scrollTop();
var left = 0 - $window.scrollLeft();
if (scrollPos >= navPos) {
$('.nav_menu').addClass('fixed').css('left', left + 'px');
} else {
$('.nav_menu').removeClass('fixed').css('left', 0);
}
});
body,
html {
height: 1000px;
width: 2000px;
position: relative;
margin: 0;
padding: 0;
}
.nav_menu {
height: 50px;
background-color: blue;
width: 195px;
}
.fixed {
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br><br>
<div class="nav_menu"></div>
I have a #sidebar (which starts below my #header div) and a #footer (around 120px off the bottom of the page).
I'm trying to make the sidebar scroll with the content of the page. The code below does this semi-successfully:
/* profile sidebar */
#sidebar>div{ width: 300px; margin-top: 10px; }
#sidebar.fixed>div{position:fixed;top:0;}
#sidebar.fixed_bottom>div{position:fixed;bottom:172px;}
jQuery(function ($) {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var el = $('#sidebar'),
pos = el.position().top;
$(window).scroll(function() {
if ($(this).scrollTop() >= pos) {
if ( $(this).scrollBottom() <= 172 ) {
el.removeClass('fixed');
el.addClass('fixed_bottom');
} else {
el.removeClass('fixed_bottom');
el.addClass('fixed');
}
} else {
el.removeClass('fixed');
}
});
});
The problem is, on smaller resolutions, this makes the sidebar "jump" once you reach a certain position on the page. It stops it from overlapping the footer (which is the problem if you remove the fixed_bottom class) but doesn't look good.
What I'd like to do is this: user scrolls to the bottom of the page, the sidebar scrolls along with the content until it reaches say 20px above the top of my footer, at which point it stays there until the user scrolls back up.
Thanks in advance,
I believe this should do what you want.
http://jsfiddle.net/FDv2J/3/
#sidebar>div{ width: 100px; margin-top: 10px; position:fixed; left: 0; top: 0;}
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $el = $('#sidebar>div');
var $window = $(window);
$window.bind("scroll resize", function() {
var gap = $window.height() - $el.height() - 10;
var visibleFoot = 172 - $window.scrollBottom();
var scrollTop = $window.scrollTop()
if(scrollTop < 172 + 10){
$el.css({
top: (172 - scrollTop) + "px",
bottom: "auto"
});
}else if (visibleFoot > gap) {
$el.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$el.css({
top: 0,
bottom: "auto"
});
}
});
});
I tried to break things up and name variables in such a way that it would be understandable. Let me know if there's anything you're unsure of. Notice that I added resize as well as scroll since it matters if the window changes size.
EDIT: Modified version using similar technique to the original to find the upper bound:
http://jsfiddle.net/FDv2J/4/
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $el = $('#sidebar>div');
var $window = $(window);
var top = $el.parent().position().top;
$window.bind("scroll resize", function() {
var gap = $window.height() - $el.height() - 10;
var visibleFoot = 172 - $window.scrollBottom();
var scrollTop = $window.scrollTop()
if (scrollTop < top + 10) {
$el.css({
top: (top - scrollTop) + "px",
bottom: "auto"
});
} else if (visibleFoot > gap) {
$el.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$el.css({
top: 0,
bottom: "auto"
});
}
}).scroll();
});
body{
margin: 0;
}
#sidebar>div {
width: 100px;
height: 300px;
margin-top: 10px;
background-color: blue;
position: fixed;
}
#stuff {
height: 1000px;
width: 300px;
background-image: url("http://placekitten.com/100/100")
}
#footer,
#header {
height: 172px;
width: 300px;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header"></div>
<div id="sidebar">
<div class="fixed">sidebar</div>
</div>
<div id="stuff">
</div>
<div id="footer">
</div>