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;
}
Related
I'm having an issue resetting a div's left position with jquery after an animation. I'm trying to animate a div from off the screen(left) to on the screen. However, I only want to trigger this animation if the value of scrollTop of the window is greater than a certain value. once the value of scrollTop is less than the value, I want the div's position to change so that it is offscreen again. This is working but only sometimes and I'm not sure why. I am also setting the position of the div to absolute at the same time I am setting it to go off the screen and this change always works!. Below is the code as well as the CSS of the div I'm trying to animate. Thank you!
Function to change position on scroll
$(window).scroll(function() {
if( $(this).scrollTop() > 500 {
$(".animated-logo").css({position:'fixed'});
$(".animated-logo").animate({left: '20px'},500);
}
else{
$('.animated-logo').css({position: 'absolute',left:'-150px'});
}
});
CSS for the animated-logo element
.animated-logo
{
position:absolute;
top:0;
left:-150px;
width:100px;
z-index:2;
}
So first off, you have a syntax error.
I would approach this with using classes instead of doing it like this. At best you're going to have a buggy transition. You can adjust the css transition to make it your desired timing.
JS:
$(window).scroll(function() {
if( $(this).scrollTop() > 500) {
$(".animated-logo").addClass('visible');
}
else{
$(".animated-logo").removeClass('visible');
}
});
CSS:
.animated-logo{
position:absolute;
top:0;
left:-150px;
width:100px;
z-index:2;
transition:0.5s;
}
.animated-logo.visible{
position:fixed;
left:20px;
}
https://jsfiddle.net/783z9rhm/6/
When you say This is working but only sometimes and I'm not sure why, it's not sure what the problem is so I'll assume you are having issues with the animation after the first time it runs. The is maybe because you are firing it ON EVERY USER SCROLL ACTION, which is a lot. Using a flag to fire it only once every time the 500px threshold is crossed will get rid of the glitch
HIH
var visible = false;
$(window).scroll(function() {
if( $(this).scrollTop() > 500) {
if(!visible){
visible = true;
$(".animated-logo").css({position:'fixed'});
$(".animated-logo").animate({left: '20px'},500);
}
}
else{
visible = false;
$('.animated-logo').css({position: 'absolute',left:'-150px'});
}
});
.animated-logo
{
position:absolute;
top:0;
left:-150px;
width:100px;
height:100px;
z-index:2;
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animated-logo"></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><br><br><br><br><br><br><br><br><br><br>
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/
okay here's an example of what i am trying to ask,
the nav bar of usatoday.
I'm using bootstrap affix. here's my code
<div class="header">
<div class="header-1">
<h1>this is some logo</h1>
</div>
<div class="header-2">
<h3>this is some heading</h3>
</div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
this is a footer
</div>
JavaScript
$('.header-2').affix({
});
how can I make the div header-2 to be fixed on the top, (when there is some scrolling and the div header-2 just reach the top position) as of the site I've mentioned earlier?
I would love to see the header-1 and header-2, but some scrolling should hide header-1 and stick header-2 to the top most.
thanks
See this Jsfiddle
you can check the position of the slider and add class accordingly
$(window).scroll(function () {
if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
$('#header-2').addClass('posi');
} else if ($(window).scrollTop() == 0){
$('#header-2').removeClass('posi');
}
});
use jquery look at this example
http://jsfiddle.net/5n5MA/2/
var fixmeTop = $('.fixme').offset().top; // Get initial position
$(window).scroll(function() { // Assign scroll event listener
var currentScroll = $(window).scrollTop(); // Get current position
if (currentScroll >= fixmeTop) { // Make it fixed if you've scrolled to it
$('.fixme').css({
position: 'fixed',
top: '0',
left: '0'
});
} else { // Make it static if you scroll above
$('.fixme').css({
position: 'static'
});
}
});
Bootstrapped answer using Bootstrap.affix()
$('.header-2').affix({
offset: {
top: function () {
return (this.top = $(".header-2").offset().top);
}
}
});
This also needs CSS for the fixed positioning (see the Docs).
The affix plugin toggles between three classes, each representing a
particular state: .affix, .affix-top, and .affix-bottom. You must
provide the styles for these classes yourself (independent of this
plugin) to handle the actual positions.
.header-2.affix {
top: 0;
}
Working example at Bootply: http://www.bootply.com/S03RlcT0z0
<style>
.header {
top: 0%;
left: 0%;
width: 100%;
position:fixed;
}
</style>
I'm sorry didnt look at your problem carefully.
This may helps you Issue with Fixed Header and Bootstrap Affix / Scrollspy - Not jumping to correct location
I want my nav menu to slide up to a certain level as soon as I scroll down, and reappear as soon as I scroll up. I want it to be exactly as the following menu: http://www.defringe.com/
If you notice, when we slide down, we can still notice a tip of the menu.
Now what I was able to find so far is a code that hides the menu completely. here is my code:
HTML:
<header id="header-wrap">
<nav id="topnav">
<ul>
<li>point1</li>
<li>point2</li>
<li>point3</li>
<li>point4</li>
</ul>
</nav>
CSS:
#topnav{
position:absolute;
margin:auto;
padding-top:20px;
height:60px;
width:576px;
bottom: 0;}
#header-wrap{
background:#f1f2f2;
height:60px;
position:fixed;
width:100%;}
jQuery:
$(function(){
$('header').data('size','big');
var previousScroll = 0;
headerOrgOffset = $('#topnav').height()
$('#header-wrap').height($('#topnav').height());
});
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
$('#header-wrap').slideUp("fast");
} else {
$('#header-wrap').slideDown("fast");
}
}
previousScroll = currentScroll;
});
Thanks!
In this case you do not want to you slideUp / slideDown but rather build your own function that slides the menu only a bit to -margin
Somnething like
$(window).scroll(function () {
var currentScroll = $(this).scrollTop();
if (currentScroll > headerOrgOffset) {
if (currentScroll > previousScroll) {
// Say the menu height is 100px
$('#header-wrap').css("margin-top", "-90px");
} else {
$('#header-wrap').css("margin-top", "0");
}
}
previousScroll = currentScroll;
});
Obviously you need to format the menu properly, have it fixed etc, but this should do the trick. If you are not sure how to make it work, let me know and I can do it for you completely.
I need to make a menu bar like the one in
http://showbic.com/sports/adam-milne-vs-west-indies/
In this website the menu_bar is not on the top, but when you scroll down the menu bar doesn't go up with the rest of the content, but after touching the top it stays at the top.
I know some JavaScript is used combined with the CSS, but how I don't know, please someone help me.
Thank You in Advance.
I would advise trying something with onscroll in Javascript and then keeping the header at the top you can use position:fixed; in the container's CSS. (you might want to play around with the top placement or something else to keep it at the very top and in your preferred spot when not needed at the top)
See for example:
<script type="text/javascript">
var fixed = false;
onscroll = function()
{
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 200)
{
if (!fixed)
{
$('.navbar-wrapper').css({ position: 'fixed', top : 0 });
fixed = true;
}
}
else
{
if (fixed)
{
$('.navbar-wrapper').css({ position: 'relative', top : 200 });
fixed = false;
}
}
}
</script>
When looking into the source code, you can view the javascript part that is controlling this bar. http://showbic.com/wp-content/plugins/seo-alrp/js/slidebox.js?ver=3.8.
Instead of :
$('#alrp-slidebox').animate({'right':'0px'},300);
Put:
$('#yourContent').animate({'top':'0px'},300);
And for (we suppose that the height of the box is 300px):
$('#alrp-slidebox').stop(true).animate({'right':'-430px'},100);
Put:
$('#yourContent').stop(true).animate({'top':'-300px'},100);
This can be your css
body{
height:1000px;
}
div{
width:200px;
height:100px;
background:red;
position:relative;
top:200px;
}
.fixedClass{
position:fixed;
top:0;
}
the jquery code
$(window).scroll(function(){
if($(window).scrollTop() > 200){ // position of menu from the top
$('div').addClass('fixedClass');
}
else{
$('div').removeClass('fixedClass');
}
})
the Html :P
<div>
</div>
the working fiddle