Develop Reference

scrollTop with jQuery offset not working properly in Firefox unless mouseout occurs

The scrollHash() function below is intended to scroll to a target anchor while adjusting the position to reflect both the fixed menu and desired margin-top.
The function works properly in Chrome, however it only works in Firefox if a mouseout event occurs before the function is completed (accounting for the function's duration and setTimeout()). Otherwise, if the mouse continues hovering over the link in Firefox throughout the function’s execution, the function fails to complete the second step of adjusting the position (subtracting the fixed menu’s height from offset().top).
It is worth noting that the problem doesn’t present in JSFiddle + Firefox (using the identical code and version of jQuery, 1.9.1), and I'm running Firefox version 69.0.3 (64-bit). Fiddle available here: https://jsfiddle.net/chayanyc/otkLa90x/
Code Snippets
CSS:
body {margin: 0; padding: 0; height: 100%; overflow-x: hidden;}
* {box-sizing: border-box;}
.header_container {height: var(--targetPosition); width: 100vw; margin: 0; padding: 0; position: fixed; top: 0; display: block;}
.main {margin-top: var(--topWrapper); width: 100%;}
.Section {padding: var(--sectPadding) 0; width: 100%;}
#media (max-width: 600px) {
:root {
--sectPadding: 5rem;
}
}
#media (min-width: 600px) {
:root {
--sectPadding: 9.5rem;
--targetPosition: 9.3rem;
}
}
JavaScript:
// SCROLL HASH FUNCTIONS //
window.onhashchange = scrollHash;
function scrollHash() {
menuHeight = document.getElementById('header').offsetHeight;
$('.TargetMark').removeClass('TargetMark')
if (window.location.hash) {
$(window.location.hash).addClass('TargetMark')
$('html, body').animate({
scrollTop: $('.TargetMark').offset().top - menuHeight
}, 100);
}
}
// SET MARGIN TOP //
var headerHeight;
function setTarget() {
headerHeight = document.getElementById('header').offsetHeight;
headerHeight = headerHeight + "px";
document.documentElement.style.setProperty('--topWrapper', headerHeight);
}
$(document).ready(function () {
setTarget();
});
$(window).resize(function () {
setTarget();
});
console.log output
// SAME OUTPUT IN CHROME VS. FIREFOX
var offset = $('.TargetMark').offset();
console.log( (offset.top - topHeight) );
// DIFFERING OUTPUT IN CHROME VS. FIREFOX
var $window = $(window);
$(window).on('scroll', function () {
$topOffset = $(this).scrollTop();
console.log($topOffset);
});

How to fadeIn a div at the bottom of the window when scrolling?

I have this problem which is probable very simple to solve, but I'm a newbie with JS/JQuery.
I have this code (see fiddle here: https://jsfiddle.net/Tiph/6ep3hp4j/) where my div footer shows when the scroll gets at the bottom of the document, but I want it to show when the scroll gets at a certain height under my header and have a fixed position at the bottom of my window. I understand that I have to calculate something with window.height, and/of offsetTop, but nothing works.
Someone can help me with it?
Thank you so much! :-)
my code here:
var footer = $('#footer'),
extra = 10;
footer.css({ opacity: '0', display: 'block' });
$(window).scroll(function() {
var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
documentHeight = $(document).height();
console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )
if( scrolledLength >= documentHeight ) {
footer
.addClass('bottom')
.stop().animate({ bottom: '0', opacity: '1' }, 300);
}
else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {
footer
.removeClass('bottom')
.stop().animate({ bottom: '-100', opacity: '0' }, 300);
}
});

I create new sample code for you to understand how its work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
var count=700;
var menuHeight = $('#footer').height()+count;
var top = $(this).scrollTop();
var bottom = $(document).height() - $(this).height() - $(this).scrollTop();
if (bottom < menuHeight) {
$('#footer').removeClass( 'top' );
$('#footer').addClass( 'bottom' );
$('#footer').fadeIn( 'slow' );
}
else {
$('#footer').fadeOut( 'slow' );
}
});
});
</script>
<meta charset="utf-8">
</head>
<body>
<style>
#footer{
width: 100%;
height: 60px;
background-color: #cccccc;
vertical-align: middle;
text-align: center;
font-size:3em;
}
.bottom{
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
display:block;
}
</style>
<div style="height:2000px;"></div>
<div id="footer" style="display:none" > This is your footer</div>
<div style="height:700px"></div>
Try to change the number 700 to set where you want to footer to be shown

Say you want the header to show when you have scrolled 100px from the top.
You can do something like:
$(window).on("scroll", function() {
if(document.body.scrollTop >= 100) {
$("#footer").fadeIn()
} else {
$("#footer").fadeOut()
}
});
Say, you want to only show the header if a button with id, callToAction is above the viewport, you can do:
$(window).on("scroll", function() {
if(document.getElementById('callToAction').getBoundingClientRect().top <= 0) {
$("#footer").fadeIn()
} else {
$("#footer").fadeOut()
}
});

This code var y = $(this).scrollTop(); get your scroll height from top.
$(window).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) { // scroll gets at a certain height
$('.bottomDiv').fadeIn();
} else {
$('.bottomDiv').fadeOut();
}
});

If I correctly understand your question you need to change documentHeight with value what you want.
Example: documentHeight = 150; not documentHeight = $(document).height();
It is good idea to rename documentHeight variable.

stick part in a specific range

i have a container that is stick to top after a specific point.
but its not enough for me.
i have a footer in the page and when the screen is small the stick part is hiding under the footer.
i want it to stop moving down in the footer top (to stop be fixed to 0 that point but be fixed to minus number that is the substraction between them).
this is my code.
what should i add for that goal?
and when to call it?
on resize?
on ready?
etc.
thanks a lot
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
if (getBrowserHeight().width > 1284) {
var $div = $("#Container");
if ($(window).scrollTop() > $div.data("top")) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
});

This should get you going.
Don't mind to ask for help if somehting isn't clear.
$(document).ready(function() {
$(window).scroll(function() {
var footerEl = $('footer').offset().top;
var footerTop = (footerEl - $(window).scrollTop());
var containerHeight = $('.container').height();
var footerHeight = $('footer').height();
console.log('footer', footerTop);
$('.container').removeClass('sticky');
if (footerTop <= containerHeight) {
$('.container').addClass('sticky');
$('.container').css('bottom', footerHeight);
}
});
});
body {
height: 1000px;
position: relative;
}
.container {
width: 100%;
min-height: 300px;
position: fixed;
top: 0;
background: red;
}
.sticky {
position: absolute;
top: auto;
}
footer {
width: 100%;
min-height: 500px;
position: absolute;
bottom: 0;
background: black;
}
<html>
<body>
<div class="container"></div>
<footer></footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</html>

I've tried to make as few changes to your code as possible, but there's better ways to get around this ie. using classes, like in #mhx answer. Full JavaScript below (sorry, had to remove your getBrowserHeight() as it wasn't defined):
window.onscroll = function (event) {
fixDiv();
};
function fixDiv() {
var $div = $("#Container");
var $footer = $("footer");
if ($(window).scrollTop() >= $div.data("top") && $(window).scrollTop() < $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'fixed', 'top': '0' });
}
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
else {
$('#Container').css({ 'position': 'static', 'top': 'auto' });
}
}
$(document).ready(function () {
$("#Container").data("top", $("#Container").offset().top);
$("footer").data("top", $("footer").offset().top);
});
Besides adding a top data attribute to your footer and defining $footer in the start of fixDiv(),I've added this to your initial if statement, to make sure that the scroll position, does not exceed the top of the footer minus the height of your div.
&& $(window).scrollTop() < $footer.data("top") - $div.height()
... and I've added this else if statement, in case it does exceed the top of the footer minus the height of your div
else if ($footer.data("top") > $footer.data("top") - $div.height()) {
$('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}
Here's a fiddle: http://jsfiddle.net/ds5tptay/

Move child element with mousemove

I'd like to know if there's a way to explore the content of a div by moving mouse? like for example having a 1000px*1000px pic inside a 500px*500px div content in overflow:hidden and being able to see the rest of the picture by putting the cursor in the right-bottom side of the div.
And if there's a way how should I proceed ?

Something nice and smooth?
jQuery(function($) {
const $mmGal = $('#mmGal'),
$mmImg = $('#mmImg'),
damp = 10; // 1 = immediate, higher number = smoother response
let X = 0, Y = 0,
mX = 0, mY = 0,
wDiff = 0, hDiff = 0,
zeno, tOut;
// Get image size after it's loaded
$mmImg.one('load', function() {
wDiff = (this.width / $mmGal.width()) - 1;
hDiff = (this.height / $mmGal.height()) - 1;
}).each(function() {
if (this.complete) $(this).trigger("load");
});
$mmGal.on({
mousemove(ev) {
mX = ev.pageX - this.offsetLeft;
mY = ev.pageY - this.offsetTop;
},
mouseenter() {
clearTimeout(tOut);
clearInterval(zeno);
zeno = setInterval(function() { // Zeno's paradox "catching delay"
X += (mX - X) / damp;
Y += (mY - Y) / damp;
// Use CSS transition
$mmImg.css({transform: `translate(${-X * wDiff}px, ${-Y * hDiff}px)`});
// If instead you want to use scroll:
// $mmGal[0].scrollTo(X * wDiff, Y * hDiff);
}, 26);
},
mouseleave() {
// Allow the image to move for some time even after mouseleave
tOut = setTimeout(function() {
clearInterval(zeno);
}, 1200);
}
});
});
#mmGal {
position: relative;
margin: 0 auto;
width: 500px;
height: 220px;
overflow: hidden;
background: #eee;
}
#mmImg {
display: block;
}
<div id="mmGal">
<img id="mmImg" src="https://i.stack.imgur.com/BfcTY.jpg">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Here's another similar approach to mousemove element in opposite direction
http://en.wikipedia.org/wiki/Zeno%27s_paradoxes

give widht and height to div wrapped for the image
here is the DEMO
on :hover add overflow: visible; to the div

This is almost what you want. See this fiddle http://jsfiddle.net/sajith/RM9wK/
HTML
<div id="container"><img src="http://farm4.staticflickr.com/3668/12858161173_8daa0b7e54_b.jpg"/></div>
CSS
#container {
width:300px;
height:300px;
overflow: hidden;
}
#container img {
position: relative;
}
Javascript
$(function() {
$( "#container" ).mousemove(function( event ) {
var width = $("#container img").width();
var height = $("#container img").height();
var divWidth = $("#container").width();
var divHeight = $("#container").height();
var xPos = (width / divWidth - 1) * event.pageX
var yPos = (height / divHeight -1) * event.pageY
$("#container img").css('left', '-'+ xPos+'px');
$("#container img").css('top', '-'+ yPos+'px');
});
});

I would use "triggers" (hot spot) ~ add some small div element and set their position as you want, now when mouse enter trigger some events....
Simple Example: jsfiddle
CSS
div.container {
position:relative;
width:100px;
height:100px;
overflow:hidden;
}
.trigger {
right:0;
bottom:0;
position:absolute;
z-index:2;
width:10px;
height:10px;
background-color:transparent;
}
HTML
<div class='container'>
<img src='http://static.adzerk.net/Advertisers/12f0cc69cd9742faa9c8ee0f7b0d210e.jpg' />
<div class='trigger'></div>
</div>
jQuery
$('.trigger').mouseenter(
function(){
$(this).parent('.container').css({
'width':'220px',
'height':'250px'
});
});
$('.container').mouseleave(
function(){
$(this).css({
'width':'100px',
'height':'100px'
});
});

Sticky Footer and Animation

I found this jsfiddle here at stackoverflow, but the solution provided by the person is very jumpy. http://jsfiddle.net/BramVanroy/ZVzEe/ I need something very smooth.
var secondary = $("#secondary-footer");
secondary.hide().addClass("fixed").fadeIn("fast");
$(window).scroll(function() {
if (secondary.offset().top >= ($(document).height() - 350)) {
secondary.removeClass("fixed");
}
else if(secondary + ":not('.fixed')") {
secondary.addClass("fixed");
}
});
How I need the sticky footer to work is for it to show the footer as a narrow bar at the bottom of the page while still scrolling through the content. Once the bottom of the page is reached with the scrollbar, the footer will expand in height.
The jsfiddle provided is very close to how I need this to work, but I need something very smooth. And another note, the height of the fully expanded footer is not fixed. Thanks to everyone for your help.

demo
jQuery
var secondary = $("#secondary-footer");
secondary.hide().addClass("fixed").fadeIn("fast");
$(window).scroll(function() {
var scrollBottom = $(window).scrollTop() + $(window).height();
$("#content").css("bottom",secondary.height());
var maxHeight = 350; // set maximum height of the footer here
var minHeight = 120; // set the minimum height of the footer here
secondary.height(maxHeight - ($(document).height() - scrollBottom));
if (secondary.height() <= minHeight) secondary.height(minHeight);
});
CSS
#content {
width: 90%;
margin: 0 auto;
padding: 0.5em;
background: #dedede;
position:relative; /* added this */
}
#secondary-footer {
width: 100%;
height: 120px;
background: #666;
position: fixed;
bottom: 0;
left: 0;
}
/* removed #secondary-footer.fixed and merged content with #secondary-footer */

Another solution: http://jsfiddle.net/27rNu/
jQuery
$(document).ready(function() {
var secondary = $("#secondary-footer");
secondary.addClass("fixed");
var windowH = $('#wrapper').outerHeight(true);
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if (scrollVal < (windowH - 350 * 2)) {
secondary.addClass("fixed");
}
else {
secondary.removeClass("fixed");
}
});
});
I also added a "wrapper" div around the whole html.