Develop Reference

Show div on scroll not working on page refresh/if it hasn't run already

I'm trying to fadeIn a div after I scroll to a certain point (pretty page on the middle of my first page). A good function that does that can be found here:
Show div on scrollDown after 800px
I'm talking about this one
var y = $(this).scrollTop();
if (y > 300) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
But the problem with this one is it doesn't hide the div if you haven't already scrolled past the point of the fade. I want to hide the div first and then show it when I scroll to it or past the point where I get to it (for me it's 300px).
I have tried:
setting the opacity of the div (or the header in the div) to 0: this didn't display anything at all. I did this since I saw that fadeIn() and fadeOut() are both transformations of the opacity. I wanted to first have it hidden by it's opacity and then let the function change it's values. It didn't work.
I think I need a function separate from this that checks if I haven't scrolled past the y point yet and if so it hides the div. And once I scroll to the y point the function should work as normal. But I have no clue how to write JavaScript.

I fixed it myself. I needed to type display: none to the div.

A div that is position:fixed while scrolling vertically but position:relative while scrolling horizontally?

I'm trying to position a div element at the top of my website that has a position fixed while scrolling vertically, but have a relative position while scrolling horizontally. I don’t believe this is possible to achieve with CSS alone (maybe possible?). I assume I have to use some Javascript (JQuery) to force this div to stay at the top of the screen while still having a relative position while scrolling horizontally.
I’ve tried placing fixed div’s inside relative divs and many variations of positions using CSS without success. I’ve also tried detecting when the user scrolls and then forcing the div to the top of the page while the div is still relative, but cannot get the feature working properly. The feature needs maintain positions while scrolling horizontally and stay fixed at the top of the screen while scrolling vertically.
I have an fiddle example that shows what I’m working with and when scrolling vertically I get my desired results. However when scrolling horizontally the positions at the top of the page would be rendered useless. If you remove the ‘fixed’ css class you can see how horizontal scrolling should work and how the positions at the top of the page stay relative.
/** JQuery Scroll Attempt **/
$( document ).ready(function() {
console.log( "ready!" );
$(window).scroll(function () {
console.log('scrolling..');
$(".rel").css( {top: -$('.rel').scrollTop() });
});
});
UPDATE(Solved):
OK I figured it out, this JQuery snippet worked for me, I'll update the fiddle as well.
// JQuery
$( document ).ready(function() {
$(window).scroll(function () {
var currPos = $(document).scrollLeft();
$('.fixed').css('left', -currPos + 5 );
});
});

Fixed side menu inside wrapper

So I have a site that is contained in a wrapper that has a max width. This site also has a fixed side menu that is toggled with a button.
My issue is having the fixed side menu to stay inside the page wrapper as fixed elements are relative to the window not the parent element.
Here is an example using position: fixed: https://jsfiddle.net/okavp4p1/
As you can see the menu is coming out from the side of the viewport, not the wrapper (grey area).
I have found away around this using position: absolute: https://jsfiddle.net/5q3hn1fq/
Here you can see the menu is coming out of the wrapper. (correct)
But I had to write some extra jQuery to spoof fixed positioning on scroll.
// Fix menu
$(window).on('load scroll resize', function() {
navigation.find('ul').css('top', $(window).scrollTop());
});
But doing it this way causes glitches/lag on most web browsers. Though the example isn't to bad when scrolling but when implementing this on an actual site with tons more elements/code it becomes very obvious.
Here is what it looks like in use when scrolling down the page:
I have thought of disabling scrolling when the menu is open but I was just wondering if anyone can help?

there is a work-around for this. you need to create a bar at the top with position:fixed. This bar should have height: 1px and no background-color so you can't see it.
then you can add your navigation inside of there, and float:right. when you float right, it will show up, but will be pinned to the invisible fixed bar at the top. also, you have to give the nav a width of 0 so its invisible. then you can transition its width to 100px or whatever you want on button click.
finally, use jQuery to set its height to the height of the window on resizing of the window, and when you show it.
here's the fiddle: https://jsfiddle.net/ahmadabdul3/pptggn6v/1/
since the bar is inside a position:relative bar, it shouldn't jump around as much (or at all)
do NOT add right or left padding to the navigation though, this will break the effect. instead, you can put a container around the nav, and make the nav width: 90% or something so it appears to have some padding.
here's an updated fiddle with how the padding should be: https://jsfiddle.net/ahmadabdul3/pptggn6v/2/

If performance accross all browsers is the issue, you could re-write your function using plain .js instead of jquery.
I couldn't replicate the jittery movement in chrome, but the below should be put less strain on the browser.
$(window).on('load scroll resize', function() {
document.getElementById('nav-list').style.top = window.scrollY + 'px';
});
https://jsfiddle.net/hb4zsL6g/

fixed header element till it reached top of other element

I have a webpage where I want a featured image that background scrolls with the speed of browser scroll. Here is my jsfiddle
$(window).scroll(function () {
$("#featured-image").css("background-position", "50%" + ($(this).scrollTop()) + "px");
});
The problem is that now the background scrolls, but element stays empty and I see white space. I want that element to decrease in size. I thought about many solutions, but then I thought about the idea to make the bottom of header element to scroll down till it passes the featured-image element and connects with top of #content element. The problem is that the height of header and height of featured-image are variable. Could someone point me to the right solution for this problem?
I need to keep the featured-image element without height because it now works perfectly on responsive design.
here is my jsfiddle, https://jsfiddle.net/Uncite/6stm31z4/

hide the div on scrolling and show it when cursor reaches to a certain distance from the top

Description :
I have a div with width: 100% of the body and is sicked to the top of the page.
Now when I start scrolling I want the div to hide itself when it is no longer the part of visible page after scrolling e.g slideUp "But" when I start to take my cursor near the top of my page the div should re-appear when the cursor is at certain distance from the top of the page
Now I could use the following demo code
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});
but then
1) I dont how to detect if the div is out of the visible page after scrolling
2) and how to detect the y-distance of the cursor from the top of the page...
any one??

Just an idea:
1. Try getting offset of scroll top and compare it with the height of div that you want to hide (if div height is less than scroll top, hide it)
2. Maybe you can get cursor position using something like this: http://api.jquery.com/event.pagex/