I am trying to use jquery to change the height of a div across a bottom and top nav as on this codepen.
The jquery is this:
$(document).ready(function() {
var lastScrollTop = 0;
var img = 100;
$(window).scroll(function() {
var st = $(this).scrollTop();
if (st > lastScrollTop) {
// downscroll code
console.log('downward')
img = img + 1;
$('.img').height(img);
} else if (st < lastScrollTop) {
// upscroll code
console.log('upward')
img = img - 1;
$('.img').height(img);
}
lastScrollTop = st;
}).scroll();
})
body {
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Below is the html for the jquery:
<div class='wrapper'>
<nav>
<div class='topnav'>
<div class='img'>
</div>
</div>
<div class='bottomnav'>
</div>
</nav>
<div class='main'>
I am main content
</div>
</div>
The problem is that the console.logs scrolling down doesn't match the console.logs scrolling upwards. So the polygon div spanning both navs doesn't end up where it's supposed to. Please see the image below for console.logs:
I am trying to make the top nav disappear as you scroll the grey nav becomes fixed and the polygon shaped div becomes the size of the grey nav component. The idea is to get a similar effect like the one on fantasy premier leagues website.
Any help would be appreciated. If you need more details please ask and ill provide clarification.
Scrolling upwards and downwards do not always happen in increments of 1, hence the mismatch. If you scroll upwards slowly, its count would exceed downwards scroll. Instead what you need to do is, determine the breakpoints where you want the changes to happen. So for e.g. you want the top navbar to disappear on scroll. The top navbar has height of 50, so when your scrollTop exceeds 50, make grey bar position fixed and at the top. Check this codepen https://codepen.io/anon/pen/RxjoeG
$(document).ready(function () {
var lastScrollTop = 0;
var img = 100;
$(window).scroll(function () {
var st = $(this).scrollTop();
if(st >= 50) {
$('.bottomnav').css({'position':'fixed', 'top':0});
} else {
$('.bottomnav').css({'position':'initial'});
}
}).scroll();
})
Related
I have an element as below :-
<div class='bulb rellax' data-rellax-speed="-2">
<img src="bulb.png" height="200" width="200"></img>
</div>
I am trying to gently expand it on scroll down and compress gently on scroll up. The element is placed on the extreme right side. The CSS is :-
.bulb{
position:absolute;
right:0px;
top:350px;
}
I have tried using the following Jquery but it doesn't help. How to reduce it on scroll up as well and make it a bit smooth.
<script>
$(document).ready(function() {
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 150) {
scroll_pos = 150;
}
$(".bulb").animate({
width: (75 + 0.75 * scroll_pos) + "px"
});
});
});
</script>
I'm trying to hide a div if user scrolls down & show it if user scrolls up.
Here's my code,
<div class="baseNav">
# some data
</div>
$(document).ready(function() {
var senseSpeed = 2,
prevScroll = 0;
$(window).scroll(function(e) {
var o = $(this).scrollTop();
var nav = $(".baseNav");
o - senseSpeed > prevScroll ? nav.filter(":not(:animated)").slideUp() : o + senseSpeed < prevScroll ? nav.filter(":not(:animated)").slideDown() : $(window).scrollTop() && nav.filter(":not(:animated)").slideDown(), prevScroll = o
})
});
When user smoothly scrolls down it hides the div, also when user smoothly scrolls up it shows it.
Problem is, in case user scrolls down and then very suddenly scrolls up it doesn't show the div. So, I think it would be a better idea to show the div (in any case) when user (or cursor) is within 100px range from the top.
How can we do that?
by default make the element visible via css
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop > 100){
$('.elem').hide();
}
else{
$('.elem').show();
}
});
You can show and hide the div using the inbuilt fadeout and fadedin option of javascript and jQuery.
Please try the below one.
$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.fade').fadeOut();
}
else
{
$('.fade').fadeIn();
}
});
body {
height: 2000px;
}
.fade {
height: 300px;
width: 300px;
background-color: #d15757;
color: #fff;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div>
The below div will get faded out on scrolling.
<div class="fade">
Scroll down i will become invisible
</div>
</div>
On this page http://www.younity.co.nz/testScrolling.html I need to change the z-index of the second navigation menu that appears from behind the video container so that it has a higher z-index and blocks out the grey 'Y' graphic once the initial menu has scrolled off the page. Hope that makes sense. So I need to test that the initial nav menu has started to leave the top of browser or it has left.
This is housing menu 1
<div class="nav-wrap-height">
<div class="nav-wrap-box">
menu
</div>
</div>
When it scrolls to the top '.nav-wrap-height' becomes sticky
.nav-wrap-height{
float:left;
width:100%;
position:relative;
z-index: 100;
position: sticky;
top: 0;
}
What I want to do is change the z-index of the second menu (.nav-wrap-box#showNow) once .nav-wrap-height has become sticky
<div class="cntrl-nav-2" id="showNow">
<div class="nav-wrap-box">
menu
</div>
</div>
.cntrl-nav-2{z-index:10;}
I'm trying the below but not getting any result.
<script>
var distance = $('.nav-wrap-height').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$('.cntrl-nav-2').css({
z-index:'300'
});
}
});
</script>
Any assistance with this problem would be really most helpful.
Cheers
Grant
You are using the wrong selector
$('.nav-wrap-box.showNow')
when it should be
$('.nav-wrap-box#showNow')
This is what I was after. I was writing the z-index part wrong.
var distance = $('.nav-wrap-height').offset().top,
$window = $(window);
$window.scroll(function() {
if ( $window.scrollTop() >= distance ) {
$('.cntrl-nav-2').css('z-index', 200);
}
else{
$('.cntrl-nav-2').css('z-index', 10);
}
});
I have an horizontal scroll in a div which has small width than its children width.
I made it possible with CSS
div {
width: 300px;
overflow: auto;
}
div p {
width: 600px;
}
and HTML:
<div>
<p>
this is very looooooooooong text and very loooonggg paragraph
</p>
</div>
I want to add scroll listener when I scroll down (from mouse) then scroll that div's content to right, if scroll up then scroll div's content to left.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
seems that $(window).scroll doesn't fire.
I created jsfiddle: https://jsfiddle.net/t8Lc4pjs/
How to fire that event and how to move scroll to left/right depends on the direction of mouse scroll ?
Use mousewheel event to detect the mousewheel scroll.. kindly check https://jsfiddle.net/t8Lc4pjs/2/
jQuery
$(document).ready(function(){
var i=0;
$(document).on('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 < 0) {
console.log('down');
$('.scl').scrollLeft(i++);
}
else{
console.log('up');
$('.scl').scrollLeft(i--);
}
});
});
Note: If you want to scroll bit faster increment the value of `i' bit more
UPDATE
I have added code to stop value of i exceeding width of the div and going below 0 and also made the scroll bit faster kindly check this https://jsfiddle.net/t8Lc4pjs/3/
I have wrote a script to detect when I reach the div element which is a navigation bar and then I change it's css to position fixed and top 0 so it will be fixed to the top, the problem that it doesn't do that, it acts like scroll to top and it jumps to the beginning of the screen. (it's flickers)
Javascript
var currentScrollTop = 0;
var barMenuOriginalTopPos = $('#navigation').offset().top;
console.log('original:' + barMenuOriginalTopPos);
$(window).scroll(function() {
currentScrollTop = $(window).scrollTop();
console.log(currentScrollTop);
if(currentScrollTop >= barMenuOriginalTopPos && $('#navigation').hasClass('fixElementToTop') == false){
$('#navigation').addClass('fixElementToTop');
}
else if(currentScrollTop < barMenuOriginalTopPos && $('#navigation').hasClass('fixElementToTop') ){
$('#navigation').removeClass('fixElementToTop');
}
});
CSS
.fixElementToTop { position: fixed; top:0; z-index:100;}
Why
Here an non flickering solution via a jQuery plugin:
$(document).ready(function() {
$('#fixedElement').scrollToFixed({ marginTop: 0 });
});
Live example: http://bigspotteddog.github.com/ScrollToFixed/
Plugin's website: https://github.com/bigspotteddog/ScrollToFixed/
a css fixed bar on top of the screen
<div style="position:fixed;top:10px;left:10px">Nav bar</div>
Review:
sorry i didn't understand your initial question, here it goes, to avoid it flicking you should start the object with a fixed position, lets say:
<div style="height:120px">XXX</div>
<div id="navigation" style="position: fixed; top:120; z-index:100;">Navigation</div>
<div class="win" style="border: 1px solid; height: 900px;"></div>
the code:
$(window).scroll(function() {
currentScrollTop = 120-$(window).scrollTop();
console.log(currentScrollTop);
if (currentScrollTop<0) currentScrollTop=0
$("#navigation")[0].style.top=currentScrollTop+"px";
});
Set this line
var barMenuOriginalTopPos = $('#navigation').offset().top;
as
var barMenuOriginalTopPos = $('#navigation').offset().top + 6;
Refer LIVE DEMO