Change navbar-fixed position when scrolling in MaterializeCSS - javascript

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();
});

Related

Smooth mouse scroll upward using Jquery and CSS

I am try to make a smooth scroll upward and downward but having issue with the follow up image. t
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll < 400) {
$('#two').css('position', 'fixed');
$('#three').css('position', 'fixed');
}
if (scroll > 400 && scroll < 900) {
$('#two').css('position', 'absolute');
$('#three').css('position', 'fixed');
}
});
https://jsfiddle.net/KingJef/6q47vmhn/32/
I have found a question with a similar dynamics, following the proposal of the author of the question it is possible to do the same in your question:
$(document).ready(function() {
$(window).scrollTop(1);
var img1 = $('#one');
var posimg1 = img1.position().top;
var img2 = $('#two');
var posimg2 = img2.position().top;
var img3 = $('#three');
var posimg3 = img3.position().top;
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll <= posimg1) {
img1.addClass('latched');
} else {
img1.removeClass('latched');
}
if (scroll <= posimg2) {
img2.addClass('latched');
} else {
img2.removeClass('latched');
}
if (scroll <= posimg3) {
img3.addClass('latched');
}
});
});
Demo: https://jsfiddle.net/pr0mming/ybar8onj/14/
Apparently the error is to preserve the absolute images with css, instead of this they are left in fixed and the property would be eliminated once the scroll is exceeded (visibility level) but otherwise the images should be kept in fixed.
But there is a shorter solution with the same algorithm, of course, it is simply to add this magic css and remove it as the case may be:
$(document).ready(function() {
$(window).scroll(function(event) {
var scroll = $(window).scrollTop();
if (scroll < 500) {
$('#two').css('position', 'fixed');
$('#three').css('position', 'fixed');
}
if (scroll > 500 && scroll < 1600) {
$('#two').removeAttr( 'style' );
$('#three').css({ position: 'fixed', top: 0, width: 'auto' });
}
else {
$('#two').css({ position: 'fixed', top: 0, width: 'auto' });
$('#three').css({ position: 'fixed', top: 0, width: 'auto' });
}
});
});

set multiple animation on single element, when trigger them one by one

I want to set multiple animation on single element on the phone, when trigger them one by one. I achieve this by the under method , but have 2 problems:
I need accurate position and size, so I use top bottom width height. But I know use these properties, the browser need to render again, so it is not efficient.
On the second animation, although I set animation-fill-mode: forwards, but still need to set 0% keyframes to assure second animation start point is on the first animation end point.
Thanks for more efficient method.
my demo
html:
<button id="first">first</button>
<button id="second">second</button>
<div class="moon"></div>
css:
.first {
animation-name: first;
}
.second {
animation-name: second;
}
#-webkit-keyframes first {
100% {
height: 2.5rem;
width: 2.5rem;
left: 4.1rem;
bottom: 11.7rem;
}
}
#-webkit-keyframes second {
0% {
height: 2.5rem;
width: 2.5rem;
left: 4.1rem;
bottom: 11.7rem;
}
100% {
height: 4rem;
width: 4rem;
left: 5.8rem;
bottom: 10.5rem;
}
}
js:
var $moon = $('.moon');
$('#first').click(function() {
$moon.addClass('animated first');
});
$('#second').click(function() {
$moon.addClass('animated second');
});
You might want to try with the JQuery keyframe plugin, you can download it here:
https://github.com/Keyframes/jQuery.Keyframes
You can then initialize a set of variables such as height width top and left like this:
var $moon = $('.moon'),
newHeight = '0',
newWidth = '0',
newTop = '0',
newLeft = '0';
And then for the clicks you could try dynamic variables for each click incrementing 40 each time it clicks?
$('#first').click(function() {
newHeight = $moon.height() + 40+'px';
newWidth = $moon.width() + 40+'px';
newTop = $moon.position().top + 80+'px';
newLeft = $moon.position().left + 80+'px';
$moon.removeClass('first');
$moon.removeClass('second');
$.keyframe.define([{
name: 'first',
'0%': {'height': $moon.height()+'px',
'width': $moon.width() +'px',
'left': $moon.position().left+'px',
'top': $moon.position().top+'px'
},
'100%': {'height': newHeight,
'width': newWidth,
'left': newLeft,
'top': newTop
}
}]);
$moon.addClass('first');
});
$('#second').click(function() {
newHeight = $moon.height() + 40+'px';
newWidth = $moon.width() + 40+'px';
newTop = $moon.position().top + 80+'px';
newLeft = $moon.position().left + 80+'px';
$moon.removeClass('first');
$moon.removeClass('second');
$.keyframe.define([{
name: 'second',
'0%': {'height': $moon.height()+'px',
'width': $moon.width()+'px',
'left': $moon.position().left+'px',
'top': $moon.position().top+'px',
},
'100%': {'height': newHeight,
'width': newWidth,
'left': newLeft,
'top': newTop,
}
}]);
$moon.addClass('second');
});
Thought you might give that a try, Leo.

javascript function not working when a new if statement added

i have a function to stick the nav sidebar to the top after some scrolling.but when my screen minimizes the logo on the top shortens and the position of the nav changes.so i wrote another 'if' function inside the first one to solve the problem.now the position is correct but the nav side bar is fixing on the top while scrolling.can you please help me....the function is as below....
$(function() {
var stickyHeaderTop = $('#myScrollspy').offset().top;
var yy = document.getElementById("cor").clientHeight;
$(window).scroll(function() {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#myScrollspy').css({
position: 'fixed',
top: '8px',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
} else {
setInterval(function() {
if (yy < '490') {
var yu = '500' - yy;
$('#myScrollspy').css({
position: 'absolute',
top: ''
700 '-yy',
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
}, 30);
}
});
});
You have some syntax issues, have mentioned them in the comments below.
if (yy < 490) { //syntax issue here
var yu = 500 - yy; //syntax issue here
$('#myScrollspy').css({
position: 'absolute',
top: (700 - yy)+'px', //syntax issue here
left: '0px'
});
$('#my').css({
position: 'absolute',
right: '0px'
});
}
document.getElementById("cor").clientHeight will return an int(number).
Check element.clientHeight
Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

Javascript Menu Jumping from bottom to top instead of Scrolling

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

Yelp-style google map that follows the user up and down the page

I would like to have a google map on my page in its own column, that will slide up and down to match the scroll height of the browser window. I've seen this functionality on a few sites (yelp comes to mind). Does anyone know a good jQuery plugin that implements this functionality? I am not even sure how to search for such a plugin because I'm not exactly sure what to call it.
Edit: Using Alley's solution, I came up with this as the final answer:
$(function() {
$(window).scroll(function() {
var $map = $('#mymap');
var locMin = 0;
var locMax = $map.parent().height() - $map.height()
var dif = $(window).height() / 2 - $map.height() / 2;
var loc = dif + $(window).scrollTop() - $map.parent().offset().top;
if (loc > locMax)
loc = locMax;
if (loc < locMin)
loc = locMin;
$map.css('top', loc);
})
make sure to use CSS to make the #mymap element to be position: relative.
Just wrote one quickly for you:
$(function() {
$(window).scroll(function() {
if($('#map').offset().top <= 0) {
$('#map').css({ position: 'fixed', top: 0, left: '50%', 'margin-left': YOUR PAGE WIDTH / 2 - $('#map').width() })
} else {
$('#map').css({ position: 'relative', top: 'auto', left: 'auto', margin:0 })
}
})
})

Categories