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/
Related
I have a fixed navigation with an extra class called "fixed",
which activates when you scroll down.
CSS:
.fixed {
position:fixed;
top:0;
}
JQuery:
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$(".mod_customnav").addClass('fixed');
}
});
I want it to stop being fixed at a certain point, so that you can scroll further down without the navigation-menu but it should also stay in place (the place where it stopped).
I tried to implement that like this:
CSS:
.unfixed {
position:relative;
}
JQuery:
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {
$(".mod_customnav").removeClass('fixed');
$(".mod_customnav").addClass('unfixed');
}
});
When I do that it
Doesn't stay in place
Blocks you from scrolling down further
Any help or suggestion is appreciated!
JSFiddle:
https://jsfiddle.net/a0mf68ho/1/
Use absolute instead of relative(placing the div relative to its parent element)
.unfixed {
position:absolute;
}
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>
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();
})
I created a script that should show the menu is shaking up and hide it when you go down.
Now, it works if the scroll is of the body but if i would do that with a div in overflow condition, how can i do this ?
my script is very simple
var lastScroll = 0;
$('#ipotetic div').scroll(function(event){
var st = $(this).scrollTop();
$('.header').stop();
if (st > 54) {
$('.header').css({"box-shadow" : "0 4px 0 rgba(0,0,0, 0.1)"});
if (st > lastScroll){
//down
$('.header').animate({top:'-54px'},200,'swing');
}
else {
//up
$('.header').animate({top:'0px'},200,'swing');
}
lastScroll = st;
}
else { $('.header').css({"top" : "0"}); $('.header').css({"box-shadow" : "none"}); }
});
this is the div structure
<div class="wrap"><div class="overflower"><div class="sizer">#content</div></div></div>
and css
.wrap {height:100%;position:relative;float:left;overflow:hidden;}
.overflower {width:410px;overflow:auto;height: 100%;}
.sizer {width:390px;}
It works perfectly with $(window).scroll(function(event){
but, why with a div it doesn't work, any ideas ?
Yes it is possible with <div> as long as the content overflows and CSS overflow:auto or scroll is applied to the div. It's detailed on the documentation and I've also tested on jsfiddle.
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