I am trying to make a menu that sticks to the bottom of the page and then to the top after scrolling. The only problem is that instead of scrolling with the page, the menu stays in the same place and then jumps to the top right at the end.
I am running stellar.js on the site also and I wondered if this was conflicting but I removed the calling javascript and the problem persisted so I put it back.
The site URL is www.percolatedpropaganda.co.uk
I am stumped and any help would be much appreciated!
Javascript
$(document).ready(function() {
var windowH = $(window).height();
var stickToBot = windowH - $('#menu').outerHeight(true);
$('#menu').css({'top': stickToBot + 'px'});
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > stickToBot ) {
$('#menu').css({'position':'fixed','top' :'0px'});
} else {
$('#menu').css({'position':'absolute','top': stickToBot +'px'});
}
});
});
CSS
#menu {
font-size: 85%;
position: relative;
float: left;
}
Why don't you try this:
Javascript:
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 0 ) {
$('#menu').css({bottom: '', top :'0px'});
} else {
$('#menu').css({top: '', bottom: '0px'});
}
});
});
CSS:
#menu {
position: fixed;
bottom: 0;
}
Check it out: Example
UPDATE:
If you want the movement to be animated use this instead:
Javascript:
$(document).ready(function() {
var menu = $('#menu');
var windowH = $(window).height();
var stickToBot = windowH - menu.outerHeight(true);
menu.css('top', stickToBot + 'px');
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 0 ) {
menu.stop().animate({top :'0px'});
} else {
menu.stop().animate({top: stickToBot + 'px'});
}
});
});
CSS:
#menu {
position: fixed;
}
Have a look: Example
UPDATE 2:
If you want it like cwtchcamping.co.uk... have a look at this:
Javascript:
$(document).ready(function() {
var menu = $('#menu');
var windowH = $(window).height();
var stickToBot = windowH - menu.outerHeight(true);
menu.css('top', stickToBot + 'px');
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if (scrollVal > stickToBot) {
menu.css({top: '0px', position: 'fixed'});
}
else {
menu.css({top: stickToBot + 'px', position: 'absolute'});
}
});
});
CSS:
#menu {
position: absolute;
}
Example: JSFiddle
Related
I have an sticky footer which contains a clickable arrow that lets me click through the sections on my website, my only issue is that it does not disappear when the last section has been reached. I'm quite new to jQuery and JS and not sure how to execute something like this.
I've done some research and tried this with no luck:
document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('arrow').style.display='none';
}
}
Here is the rest of what I have:
<div class="scroller animated pulse infinite" id="arrow">
<i class="ion-md-arrow-dropdown"></i>
</div>
CSS:
.scroller {
height: 80px;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: transparent;
box-shadow: 0 2px 2px #ddd;
z-index: 1;
}
.scroller i {
color: #fff;
-webkit-text-stroke: 1px #555;
font-size: 70px;
margin: 0 48.5%;
}
JS:
$(function(){
var pagePositon = -1,
sectionsSeclector = '.scrolling_section',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$('#arrow i').click(function(e){
if ($(this).hasClass('ion-md-arrow-dropdown') && pagePositon+0 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top - $('nav').height()
}, 2000);
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
According to what I understand - you should first see iכ the footer section is visible and if so - hide the arrow, else - show the arrow
For that, this code should do the trick
$(window).scroll(function() {
var top_of_element = $('.footer-nav').offset().top;
var bottom_of_element = $('.footer-nav').offset().top + $('.footer-nav').outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$('#arrow').hide();
} else {
$('#arrow').show();
}
});
based on Jquery check if element is visible in viewport
Fist of all, sorry for my bad english.
I've this site with a company logo at the top and a navbar down it. I wanna change the navbar position to the top when I scroll past the company logo.
I try to change it with CSS in:
.navbar-fixed {
position: relative;
height: 56px;
z-index: 1000;
}
to...
.navbar-fixed {
position: top;
height: 56px;
z-index: 1000;
}
using Materialize.js on the $(document).ready(function (){}) with the next algorhythm:
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-fixed").css('position', 'top');
} else {
$('.navbar-fixed').css('position', 'relative');
}
});
}
but it didn't works.
First of all, css property position doesn't have top value.
Okay, here's a script taken 3 minutes of my time. I believe you can easily improve it to let it suit your needs. Say your company logo has id="logo":
function fixNavbar() {
var $logo = $('#logo'),
$nav = $('.navbar-fixed'),
offset = $logo.offset(),
logoHeight = $logo.height(),
distance = offset + logoHeight,
scroll = $(window).scrollTop();
if (scroll >= distance) {
$nav.css({
'position': 'fixed',
'top': '0',
'right': '0',
'left': '0'
});
} else {
$nav.css({
'position': 'relative',
'top': 'auto',
'right': 'auto',
'left': 'auto'
});
}
}
$(window).scroll( function() {
fixNavbar();
});
I've a navigation bar that moves when page scrolls, this is jQuery:
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
And CSS
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
border-top: 0;
}
The problem is that when the navigation bar position gets fixed, the main content under the navigation bar rearrange the margin because it thinks that the navigation bar has been removed but I don't want this, I want my boxes stay in their places.
What should I do?
Here is jsfiddle:
https://jsfiddle.net/omidh/cvjt0eLL/6/
This workaround keeps your markup as it is, with minimal edits to the jQuery and CSS, see the demo and code below.
DEMO: https://jsfiddle.net/cvjt0eLL/10/
Added CSS:
.push {
margin-top: 50px; /*same height as navbar*/
}
Updated jQuery:
$(document).ready(function () {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
$('.content').addClass('push'); // added
} else {
$('.nav').removeClass('sticky');
$('.content').removeClass('push'); //added
}
};
stickyNav();
$(window).scroll(function () {
stickyNav();
});
});
So I basically want the script to start at the top of "mini" div but can't get it to work right.
#mini {
width: 100%;
padding-top: 300px;}
var tTop = $("#mini").outerHeight(true);
Full script:
$(window).scroll(checkY);
function checkY() {
//save this value so we dont have to call the function everytime
var top = $(window).scrollTop();
$(".title").each(function () {
var target = $(this).closest(".content");
var tTop = $("#mini").outerHeight(true);
var tBottom = target.offset().top + target.outerHeight();
if (top >= tTop && top <= tBottom) {
console.log("Show");
$(this).show();
} else {
console.log("Hide");
$(this).hide();
}
});
}
checkY();
Why not setting the mini style to
position:relative;
and the inner div to
position: absolute;
top:0
I have an image on a page that have a absolute position to be in the center of the page when it loads. When the user scroll down the page and the image reach a position of 20% from the top of the screen, I want to change the position of that image to fixed so it always stays on the screen at 20% from the top of the screen.
I guess that I will have to do something like this :
$(function () {
$(window).scroll(function () {
var aheight = $(window).height() / 2;
if ($(this).scrollTop() >= aheight) {
$("#image").css("position", "fixed");
}
else {
$("#image").css("position", "absolute");
}
});
});
This line is where I should put the 20% from top but I don't know how :
var aheight = $(window).height() / 2;
EDITED CODE (still not working but I forgot to post the var in my original post and the scroll height was set at 50% instead of 20%):
var t = $("#logo").offset().top;
$(function () {
$(window).scroll(function () {
var aheight = $(window).height() / 5;
if ($(this).scrollTop() >= aheight) {
$("#logo").css("position", "fixed");
}
else {
$("#logo").css("position", "absolute");
}
});
});
English is not my first language so I drew what I want to do in case my explanation was not clear :
Image of what I'm looking for
EDIT 2 (ANSWER) :
Stackoverflow won't let me answer my question because I don't have enough reputation so here is the working code I came with :
$(document).scroll(function(){
var bheight = $(window).height();
var percent = 0.3;
var hpercent = bheight * percent;
if($(this).scrollTop() > hpercent)
{
$('#logo').css({"position":"fixed","top":"20%"});
}else{
$('#logo').css({"position":"absolute","top":"50%"});
}
});
Check this fiddle.
http://jsfiddle.net/livibetter/HV9HM/
Javascript:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
CSS:
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
Alternatively, you can take a look at jquery-waypoints plugin. The use is as easy as:
$('#your-div').waypoint(function() {
console.log('25% from the top');
// logic when you are 25% from the top...
}, { offset: '25%' });