Develop Reference

Show div past certain page height 'active' on page load

hope someone can provide some guidance here. I have got some JS which tells the div to slide in to view after the user scrolls past the set Y point.
However, on page load, the div is still visible until you start scrolling. then it disappears and then slides in when its meant to.
jQuery(document).ready(function ($) {
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.mobileEnquiry').slideUp();
} else {
$('.mobileEnquiry').slideDown();
}
})
})
body {
height: 1200px
}
.mobileEnquiry {
display: flex;
position: fixed;
z-index: 999999;
bottom: 0;
width: 100%;
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
background-color: red;
height: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobileEnquiry"></div>
Anyone know why this happens? I have tried a couple of things. Firstly, moving it out of the 'on page load' section of my JS however that did nothing. Then I have looked around and tried different methods but none have worked.

jQuery slideUp() Method Hide the matched elements with a sliding motion. and the slideDown() Method, Display the matched elements with a sliding motion. So:
$( document ).ready( function () {
$( document ).scroll( function() {
var y = $( this ).scrollTop();
( y > 800 ) ? $( '.mobileEnquiry' ).slideDown() : $( '.mobileEnquiry' ).slideUp();
} )
} )
body {
height: 1200px
}
.mobileEnquiry {
display: none;
position: fixed;
z-index: 999999;
bottom: 0;
width: 100%;
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
background-color: red;
height: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobileEnquiry"></div>

How to nudge a positioned tip associated with an image to the right if it would extend off the left-hand side?

I have a problem trying to keep some help text associated with a "?" image positioned appropriately horizontally. Although it works as I would like most of the time, when the "?" moves too close to the left of the screen (either because the "?" is close to the left in the first place, or a width reduction wraps it there), the help gets chopped off
I like it to appear in a box 15rem wide, as high as it needs to be, positioned above and extending to the left of the "?", and to be visible on either a hover or click. That works fine.
What I can't figure out is how to move the help to the right by just as much as is necessary to avoid it extending off the left-hand side of the screen whenever that is necessary.
I have added another class (not shown) to those tips that I know are near the left, that extends them right instead of left. However it's not a good solution, relying on me finding them, and not coping with window resizing very well.
What I have so far is:
HTML And CSS:
.tooltip {
position: relative;
}
.tooltip > img {
vertical-align: middle;
margin-left: 0.5rem;
height: 20px;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 0.5rem;
position: absolute;
z-index: 1;
bottom: 125%;
width: 15rem;
right: 0;
margin-right: 1rem;
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext, .tooltip:active .tooltiptext {
visibility: visible;
opacity: 1;
}
<div>
<input type="text" name=xx size="40" placeholder="xxxxxx">
<span class="tooltip">
<img src="static/help.png" alt="help">
<span class="tooltiptext">Some help text for this.</span>
</span>
</div>
I'm guessing the key is dynamically determining the position of tooltiptext and adjusting left/right accordingly but I'm at a loss to know how to do that. I'm limited to CSS & JS (i.e. not JQuery).
Any help gratefully accepted.
Thanks, Chris

Here is not quite well solution, but it gives you some useful thoughts.
let tooltips = document.querySelectorAll('.tooltip');
[].forEach.call(tooltips, (el) => {
el.addEventListener('mouseover', showTooltip, this);
});
function setDefaultPosition(element) {
element.style.top = 'auto';
element.style.right = 'auto';
element.style.bottom = 'auto';
element.style.left = 'auto';
}
function showTooltip(event) {
let tooltip = event.currentTarget.querySelector('.tooltiptext')
setDefaultPosition(tooltip);
let {top:bodyTop, right:bodyRight, bottom:bodyBottom, left:bodyLeft} = document.body.getBoundingClientRect();
let {top:tooltipTop, right:tooltipRight, bottom:tooltipBottom, left:tooltipLeft} = tooltip.getBoundingClientRect();
if (bodyTop < tooltipTop) {
tooltip.style.top = '100%';
}
if (bodyBottom < tooltipBottom){
tooltip.style.bottom = '100%';
}
if (bodyRight < tooltipRight) {
tooltip.style.right = '100%';
}
if (bodyLeft > tooltipLeft){
tooltip.style.left = '100%';
}
};
Example here

I think there is more than on CSS solution. It could be done with flexbox:
https://codepen.io/anon/pen/ZJpQWE
.wrapper {
margin-top: 10rem;
width: 100%; /* adjust the with to your needs */
display: flex;
position: relative;
}
.some-input {
width: 100%;
}
.tooltip > img {
vertical-align: middle;
height: 20px;
}
.tooltip .tooltiptext {
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
position: absolute;
z-index: 1;
bottom: 125%;
width: 100%;
right: 0;
opacity: 0;
transition: opacity 1s;
padding: .5rem;
box-sizing: border-box;
border-radius: 6px;
}
.tooltip:hover .tooltiptext, .tooltip:active .tooltiptext {
visibility: visible;
opacity: 1;
}

Text/Logo inside Navbar appears to wiggle/vibrate on Scroll

I wrote code to make the logo inside my nav-bar expand-contract when I scroll, much like how the Wall Street Journal website works. However, when I scroll it now causes the logo and the other elements inside the nav-bar wiggle/vibrate.
Jquery:
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 50) {
$('#logo').stop().animate({height: "50px"},100);
$('#nav').css({height: "110px"});
}
else {
$('#logo').stop().animate({height: "70px"},100);
$('#nav').css({height: "130px"});
}
});
CSS:
#logo {
height: 70px;
width: auto;
margin: auto;
display: block;
margin: auto;
}
#nav{
display: block;
max-width: 100%;
height: 120px;
position: relative;
margin: 0;
background-color: rgba(249,249,249,1);
font-family: MyriadPro-RegularImport;
}

I would recommend using jQuery to add a class, then use CSS transitions for the animation:
$('#logo').addClass('scrolled');
CSS:
#logo {
height: 70px;
transition: all 200ms ease-out; // using 'all' so that all properties are animated
}
#logo.scrolled {
height: 50px;
}
CSS animations will be smoother and easier to troubleshoot.

Make div stick to top of page after scrolling past another div?

<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>
<style>
body { margin: 0px; background-color: #e3e3e3; }
#header { background-color: #cb5454; height: 140px; }
#sticky { background-color: #546bcb; height: 70px; }
#section { height: 1500px; }
#footer { background-color: #cb5454; height: 140px; }
</style>
Here is my code: http://jsfiddle.net/uaqh018d/
I want #sticky to stick to the top of the page after scrolling past #header. I also want it hidden until stuck. And then of course have it unstick+hide again after scrolling back up to #header.
How can I achieve this?

I would recommend adding a class to #sticky when it's ready to be fixed to the top of the screen, and then removing that class when you want to 'unstick' it. Then you can manipulate that class in CSS.
e.g. for a class fixed you'd put the following in your CSS:
#sticky {
display: none;
background-color: #546bcb;
height: 70px;
}
#sticky.fixed {
display: block;
position: fixed;
top: 0;
width: 100%;
}
And then your jQuery would look like this:
$(window).scroll(function() {
var distanceFromTop = $(this).scrollTop();
if (distanceFromTop >= $('#header').height()) {
$('#sticky').addClass('fixed');
} else {
$('#sticky').removeClass('fixed');
}
});
Here's an updated FIDDLE
I might also recommend some jQuery fade or slide effects (see the fiddle).

You can use position: fixed and in js detect when user scroll like this:
$(document).scroll(function() {
//detect when user scroll to top and set position to relative else sets position to fixed
$("#sticky").css({
"top": "0",
"position": $(this).scrollTop() > 140 ? "fixed" : "relative"
});
});
body {
margin: 0px;
background-color: #e3e3e3;
}
#header {
background-color: #cb5454;
height: 140px;
}
#sticky {
background-color: #546bcb;
height: 70px;
width: 100%;
position: fixed;
}
#section {
height: 1500px;
}
#footer {
background-color: #cb5454;
height: 140px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header"></div>
<div id="sticky"></div>
<div id="section"></div>
<div id="footer"></div>
References
.scroll()

In my case, the div I wanted to be sticky was inside of another div (ie. not stuck to the page, but in another fixed div on the side of the page). Here's my adaptation of #bowhart's answer to solving this problem given a React component (sticky_adapter.js):
module.exports.makeItSticky = function(thisReactComponent, parentScrollNode = window) {
const thisNode = $(ReactDOM.findDOMNode(thisReactComponent));
const position = thisNode.position();
// Uncomment for verbose logging
//console.log("Initial position: " + UIUtils.stringify(position));
const scrollContainer = $(parentScrollNode);
scrollContainer.scroll(() => {
const distanceFromTop = scrollContainer.scrollTop();
// Uncomment for verbose logging
//console.log("ScrollTop: " + distanceFromTop);
if (distanceFromTop > position.top) {
thisNode.addClass("stick-to-top");
} else {
thisNode.removeClass("stick-to-top");
}
});
};
Now, to make any React component sticky, I just add to the class:
componentDidMount() {
StickyAdapter.makeItSticky(this, ".some-other-div-which-is-the-container");
}
Finally, the css for the sticky class:
.stick-to-top {
display: block;
position: sticky;
top: 0;
z-index: 10;
}

Hey this is and old question but for new visitors I think u just need to add this css code to #sticky:
#sticky { position:sticky;top:0; }
and no need for javascript.
sticky toggles between relative and fixed, depending on the scroll position.
and don't forget that, the parent also should not have overflow property

jQuery fixed header slide down on scroll issue

I'm newbe in jQuery, please do not judge strictly. I want header become fixed when I scroll page 300px. And remove fixed if <300px. And I want to animate it, slide down when I scroll down, and slide up when I scroll top. Something like this Some site, scroll down and you'll see what I want.
My html like that
<div class="heading-wrapper">
1
2
3
4
5
</div>
Css
.heading-wrapper {
width: 100%;
height: 65px;
background: #000;
position: relative;
}
.heading-wrapper.fixed {
position: fixed;
top: -80px;
left: 0;
right: 0;
}
and jQuery
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('.heading-wrapper').addClass("fixed");
$('.heading-wrapper.fixed').animate({'top' : '0px'}, 800);
}
else{
$('.heading-wrapper.fixed').animate({'top' : '-80px'}, 800);
setTimeout(function(){
$('.heading-wrapper').removeClass("fixed");
},800);
}
});
It dont work like what I want.
If scrolling by pressing down mouse whell - it dont animate..
Animation appears at once only..
Slide up animation never appears..
If I scrolling fast up and down, the whole structure breaks down, no styles are added where necessary))
Please, help me to fix this, and remember, do not judge strictly! :)
JsFiddle link

Demo
js
$(document).ready(function () {
$("header").before($("header").clone().addClass("animateIt"));
$(window).on("scroll", function () {
$("body").toggleClass("down", ($(window).scrollTop() > 100));
});
});
css
body, html {
margin:0;
padding:0;
}
header {
position: relative;
width: 100%;
height: 60px;
line-height: 60px;
background: #000;
color: #fff;
}
header.animateIt {
position:fixed;
top:-60px;
left: 0;
right: 0;
z-index:999;
transition:0.4s top cubic-bezier(.3, .73, .3, .74);
}
body.down header.animateIt {
top:0;
}
.content {
padding: 0 20px 20px;
background: #fff;
line-height: 1.5;
color: #333;
}
html
<header>
1
2
3
4
5
</header>

Here's how I would do it.
First, depending on the browsers you're supporting, you could add this CSS :
.heading-wrapper {
position: fixed;
top: -80px;
transition: top 1s linear; /*as you wish*/
[...]
}
.heading-wrapper.relative {
position: absolute;
top: 0px;
}
.heading-wrapper:not(.relative).fixed {
top: 0px;
}
Then in Javascript :
var $wrapper = $(".heading-wrapper");
var $win = $(window);
var doc = document.documentElement, body = document.body;
var top = 0;
$wrapper.clone().appendTo("body").addClass("relative");
$win.scroll(function () {
top = (doc && doc.scrollTop || body && body.scrollTop || 0);
if( top > 300)
setTimeout(function(){$wrapper.addClass("fixed");},0);
else if( $wrapper.hasClass("fixed") )
setTimeout(function(){$wrapper.removeClass("fixed");},0);
});
I updated your JSFiddle.
EDIT : Added a cloned menu, absolute.