Develop Reference

Free-Scrolling Sticky Sidebar Without jQuery

I'm trying to achieve what is outlined in this Stack Overflow question, without jQuery dependency: stackoverflow.com/questions/18358816/sticky-sidebar-stick-to-bottom-when-scrolling-down-top-when-scrolling-up
But I didn't want to hijack that question.
Basically, I want the content in the sidebar to be independently scrollable but fixed when the viewport reaches either end of the sidebars contents on scroll.
My main stumbling block appears to not being able to calculate the elementTop variable when the sidebar is absolutely positioned and between the top and bottom of the container which I have set to be full height.
Full code below:
var StickySidebar = function(eventie) {
var container, containerTop, containerHeight, // container
element, elementTop, elementHeight, elStyle, // element
viewportTop = -1, viewportHeight, documentTop, // viewport
lastViewportTop, scrollingDown, top = false , bottom = false,// sticky vars
scroll = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback){ window.setTimeout(callback, 1000/60); },
options = {
container : document.querySelector('.sidebar-container'),
element : document.querySelector('.sidebar'),
sidebarClass : 'sidebar',
bottomOffset : -15,
topOffset: 90,
},
_updateValue = function() {
viewportHeight = window.innerHeight;
},
_offset = function(obj) {
var ol = ot = 0;
if (obj.offsetParent) {
do {
ol += obj.offsetLeft;
ot += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return {
left: ol,
top: ot
};
},
init = function(){
if(options.element !== null) {
container = options.container;
containerTop = offset(container).top;
containerHeight = container.clientHeight;
element = options.element;
elementTop = offset(element).top;
elementHeight = options.element.clientHeight;
lastViewportTop = window.scrollY;
viewportHeight = window.innerHeight;
eventie.bind(document, "scroll", _loop);
eventie.bind(window, "resize", _updateValue);
}
},
_loop = function() {
if (viewportTop == window.pageYOffset) {
scroll(_loop);
return false;
} else viewportTop = window.pageYOffset;
_updateValue();
var viewportBottom, elementTooBig, topOffset;
elementTop = offset(element).top;
elementHeight = element.clientHeight;
containerHeight = container.clientHeight;
scrollingDown = viewportTop > lastViewportTop;
elementTooBig = elementHeight > viewportHeight;
console.log("elementTop : " + elementTop);
console.log("viewportTop : " + viewportTop);
if (scrollingDown) {
if (viewportTop + viewportHeight >= elementTop + elementHeight) {
element.setAttribute('style','position:fixed; bottom:30px;');
} else {
element.setAttribute('style','position:absolute; top:'+ elementTop +'px;'); // issue 1
}
if (viewportTop + viewportHeight > containerTop + containerHeight) {
element.setAttribute('style','position:absolute; bottom:0;');
}
} else {
if (viewportTop < containerTop - 60) {
element.removeAttribute('style');
return;
}
if (viewportTop <= elementTop) {
element.setAttribute('style','position:fixed; top:90px;');
} else {
element.setAttribute('style','position:absolute; top:'+ elementTop +'px;');
elementTop = viewportTop + elementTop;
}
}
lastViewportTop = viewportTop;
};
return {
init: init
};
}(eventie);
I've been trying to tackle this issue for a few weeks now, and it has been driving me insane. Any help would be greatly appreciated.

If you're just trying to achieve the desired result not necessarily creating that yourself - well, there are many JavaScript libraries that provide that.
For example, Stickyfill is actually a polyfill for position: sticky which is natively supported only in Firefox 41+ and Safari 8+. Here is the demo with all kinds of stickiness you can imagine :)
P.S. At first glance you might notice something about jQuery there, but it's pure JavaScript and just adds a jQuery extension.

How can I stop this event from firing?

I have this site:
link
In the right sidebar, you'll notice that the last element runs with scrolling.
The problem is that does not stop ... go to the bottom of all.
I tried this function to accomplish the task
CODE JS:
var aux=0;
$("#text-3").addClass("follow-scroll");
var _footerH=$("#footer-container").outerHeight();
var _docH=$(document).height();
var _scrollP= $(window).scrollTop();
console.log("pozitie scroll",_scrollP);
console.log("inaltime footer",_footerH);
console.log("inaltime document HTML",_docH);
var element = $('.follow-scroll'),
originalY = element.offset().top;
var topMargin = 20;
element.css('position', 'relative');
$(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
console.log(scrollTop);
console.log("originalY:",originalY);
console.log("Scrolltop:",scrollTop);
console.log("topMargin:",topMargin);
var y = scrollTop - originalY + topMargin;
if(scrollTop < originalY) {
console.log("nu s-a declansat evenimentul");
}else {
//aici trebe adaugat top la div
aux=scrollTop - originalY + topMargin
$( '.follow-scroll' ).css( 'top', aux );
if(scrollTop>6000)
{
var _div = $( ".follow-scroll" );
var position = _div.position();
var top2=aux;
//aici trebuie sa primeasca ultimul top
$( '.follow-scroll' ).css( 'top', aux );
}
}
// top=aux;
// console.log("top_nou:",aux);
});
Can you help me solve this problem?
How can I stop this element at some point?
Thanks in advance!

Try changing your code to this
var aux = 0;
$("#text-3").addClass("follow-scroll");
var _footerH = $("#footer-container").outerHeight();
var _docH = $(document).height();
var _scrollP = $(window).scrollTop();
console.log("pozitie scroll", _scrollP);
console.log("inaltime footer", _footerH);
console.log("inaltime document HTML", _docH);
var element = $('.follow-scroll'),
originalY = element.offset().top;
var topMargin = 20;
element.css('position', 'relative');
$(window).on('scroll', function (event) {
var scrollTop = $(window).scrollTop();
console.log(scrollTop);
console.log("originalY:", originalY);
console.log("Scrolltop:", scrollTop);
console.log("topMargin:", topMargin);
var y = scrollTop - originalY + topMargin;
if (scrollTop < originalY) {
console.log("nu s-a declansat evenimentul");
} else {
//aici trebe adaugat top la div
aux = scrollTop - originalY + topMargin
if (scrollTop > 6000) {
var _div = $(".follow-scroll");
var position = _div.position();
var top2 = aux;
//aici trebuie sa primeasca ultimul top
}else{
$('.follow-scroll').css('top', aux);
}
}
});
You will notice the that you should only set $('.follow-scroll').css('top', aux); if scrollTop <= 6000 otherwise leave it where it is

How To Disable This JS Function In Responsive Designs

I am using a script in my blog http://www.helpitx.com which makes a widget floating sticky. Currently I am using this script for navigation menu but it destroys layout of responsive design specially for mobile devices which have screen height less than 768px because whole menu isn't displayed there.
Here is the script that I am using.
<script>
/*<![CDATA[*/
// Sticky Plugin
// =============
// Author: Syed Faizan Ali
(function($) {
var defaults = {
topSpacing: 0,
bottomSpacing: 0,
className: 'is-sticky',
center: false
},
$window = $(window),
$document = $(document),
sticked = [],
windowHeight = $window.height(),
scroller = function() {
var scrollTop = $window.scrollTop(),
documentHeight = $document.height(),
dwh = documentHeight - windowHeight,
extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
for (var i = 0; i < sticked.length; i++) {
var s = sticked[i],
elementTop = s.stickyWrapper.offset().top,
etse = elementTop - s.topSpacing - extra;
if (scrollTop <= etse) {
if (s.currentTop !== null) {
s.stickyElement.css('position', '').css('top', '').removeClass(s.className);
s.currentTop = null;
}
}
else {
var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;
if (newTop < 0) {
newTop = newTop + s.topSpacing;
} else {
newTop = s.topSpacing;
}
if (s.currentTop != newTop) {
s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);
s.currentTop = newTop;
}
}
}
},
resizer = function() {
windowHeight = $window.height();
};
// should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
if (window.addEventListener) {
window.addEventListener('scroll', scroller, false);
window.addEventListener('resize', resizer, false);
} else if (window.attachEvent) {
window.attachEvent('onscroll', scroller);
window.attachEvent('onresize', resizer);
}
$.fn.sticky = function(options) {
var o = $.extend(defaults, options);
return this.each(function() {
var stickyElement = $(this);
if (o.center)
var centerElement = "margin-left:auto;margin-right:auto;";
stickyId = stickyElement.attr('id');
stickyElement
.wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')
.css('width', stickyElement.width());
var elementHeight = stickyElement.outerHeight(),
stickyWrapper = stickyElement.parent();
stickyWrapper
.css('width', stickyElement.outerWidth())
.css('height', elementHeight)
.css('clear', stickyElement.css('clear'));
sticked.push({
topSpacing: o.topSpacing,
bottomSpacing: o.bottomSpacing,
stickyElement: stickyElement,
currentTop: null,
stickyWrapper: stickyWrapper,
elementHeight: elementHeight,
className: o.className
});
});
};
})(jQuery);
/*]]>*/
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#mblfloater").sticky({topSpacing:0});
});
</script>
I have enclosed my navigation menu in tag. The script is working fine but I want to disable it in mobile devices which have screen width less than 768. How could it be done?

<script type='text/javascript'>
$(document).ready(function(){
if ($(window).width() >= 768) {
$("#mblfloater").sticky({topSpacing:0});
}
});
</script>
Only run the script if the window's width is greater than or equal to (i.e. not less than) 768.

Hide the menu using a CSS media query.
For example:
<style>
#media (max-width: 600px) {
#mblfloater {
display: none;
}
}
</style>

As you are using jQuery:
if($(window).outerWidth() < 768){
//disable your code here
}

background image resizing is not working when using force reload or navigating back to homepage

In our site www.mydubaitrip.com I have a script that resizes the background image base on the browser width. My problem is whenever I try to press Ctrl+F5 or if I navigate to hotel page and back to home page, the background image doesn't resize correctly and my layout looks messed up. But if I try to press F5 again it will now adjust accordingly. I cannot figure out what is the problem.
Here's the script that I used.
var minWidth = 1024;
var minHeight = 844;
var winRatio = new Array();
var imgReady = new Array();
var orientation = 90;
var debounceId;
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) {
var minWidth = 980;
}
var readyToRotate = false;
var readyToResize = true;
var miniContentWrapperHeight = 444;
// BACKGROUND TRANSITION
var theTimer;
var currBanner = -1;
var totalBanner = 0;
var timeWaiting = parseInt(500);
var timeTextTransIn = parseInt(1000);
var timeTextTransOut = parseInt(1000);
var timeTransCross = parseInt(2000);
var timeTransInit = parseInt(0);
var timeTransInterval = parseInt(7000);
var transitioning = false;
$("#homePageMainPanel").css({ "backgroundColor": "black" });
var hybridMode = true;
if (($.browser.mozilla && $.browser.version == "5.0") ||
$.browser.msie && $.browser.version == "9.0") {
//hybridMode = false;
}
//$("html").css({ "overflow": "hidden" });
function updateOrientation() {
// scroll and hide address bar for iPhone landscape
setTimeout(function() { window.scrollTo(0, 1) }, timeWaiting);
if (window.orientation != undefined)
orientation = Math.abs(window.orientation);
resizeBackground();
}
$(window).load(function() {
resizeBackground();
if (!($.browser.msie && $.browser.version == "6.0")) {
var lang = $('meta[name="language"]').attr("content");
if ((lang == "ar") || (lang == "ir")) {
$(".carouselShadow").css('background', 'url(/media/images/fg_ar_text_bg.png) no-repeat');
}
else {
$(".carouselShadow").css('background', 'url(/media/images/fg_text_bg.png) no-repeat');
}
}
});
$(document).ready(function() {
if (typeof BackgroundInfo != 'undefined' && BackgroundInfo.length > 0) {
$("#carousel").append("<img src=\"" + BackgroundInfo[0].Src + "\" alt=\"" + BackgroundInfo[0].Alt + "\" />");
}
if ($(window).height() > $(document).height() - $("#bottomLayer").height()) {
$("#bottomLayer").css({ 'position': 'absolute', "top": parseInt($(window).height() - $("#bottomLayer").height()) });
$("#carousel img").height($(window).height() - $("#bottomLayer").height());
//alert($("#bottomLayer").offset().bottom);
$(".bookPanel").css({ 'position': 'relative', "bottom": parseInt($(".bookPanel").height() - $("#carousel").height() + 28) });
$(".carouselShadow").css({ 'position': 'relative', "bottom": parseInt($(".carouselShadow").height() - $("#carousel").height()+20) });
setTimeout(function() {
$("#bottomLayer").css({ "position": "relative", "top": parseInt($(window).height() - $("#bottomLayer").height()) });
}, 500);
setTimeout(function() {
$(".bookPanel").css({ "position": "relative", "bottom": parseInt($(".bookPanel").height() - $("#carousel").height() + 28) });
}, 500);
setTimeout(function() {
$(".carouselShadow").css({ "position": "relative", "bottom": parseInt($(".carouselShadow").height() - $("#carousel").height()+20) });
}, 500);
}
//in case the navigation height is longer than prefixed minheight, adjust minheight=navigation height
var homepageHeight = $("#homePageMainPanel").height() + $("#bottomLayer").height();
if (homepageHeight > minHeight)
minHeight = homepageHeight;
//this is only for mobile safari on ipad/iphone
window.onorientationchange = function() {
window.scrollTo(0, 1); // to prevent jumpy and blinky page transitions
updateOrientation();
}
$(window)
.resize(function() {
if (readyToResize) {
clearTimeout(debounceId);
debounceId = setTimeout(resizeEvent, 500);
}
})
.load(function() {
// scroll and hide address bar for iPhone landscape
setTimeout(function() { window.scrollTo(0, 1) }, timeWaiting);
});
initRotateBanner();
});
var winWidth = $(window).width();
var winHeight = $(window).height();
var winNewWidth = -1;
var winNewHeight = -1;
function resizeEvent() {
// JL: Hack to prevent IE 7,8 to have infinite loop when window.resize event
winNewWidth = $(window).width();
winNewHeight = $(window).height();
if (winWidth != winNewWidth || winHeight != winNewHeight) {
clearTimeout(debounceId);
resizeBackground();
}
winWidth = winNewWidth;
winHeight = winNewHeight;
}
function initRotateBanner() {
$('#carousel img').eq(0).one('load', function() {
if (readyToRotate = true) {
if (typeof BackgroundInfo != 'undefined' && BackgroundInfo.length > 0) {
$.each(BackgroundInfo, function(i, v) {
if (i > 0) {
$("#carousel").append("<img src=\"" + BackgroundInfo[i].Src + "\" alt=\"" + BackgroundInfo[i].Alt + "\" />");
}
});
initBackgroundImageReady();
}
imgReady[0] = true;
window.setTimeout("rotateBanner('init')", timeTransInit);
}
//$('#background').children("img").show();
//$('#background').children("img").css({ 'opacity': '1' });
resizeBackground();
}).each(function() {
// $(this).load();
});
/// assign each background text accordingly
var index = 0;
$('.carouselContentContainer').each(function() {
$(this).attr('id', 'text_box_' + index);
index++;
});
}
function initBackgroundImageReady() {
$('#carousel').children("img").each(function() {
//assign each background id accordingly
$(this).attr('id', 'img_box_' + totalBanner);
// flag correspondingly when bg images is loaded
imgReady[totalBanner] = false;
$(this).one('load', function(event) {
var id = $(this).attr('id');
var idArr = new Array();
idArr = id.split('_');
var index = idArr[idArr.length - 1];
//console.log(index + "loaded");
imgReady[index] = true;
resizeBackground();
});
//$(this).load();
totalBanner++;
});
}
function resizeBackground() {
readyToResize = false;
$('html').css({ 'overflow': 'hidden' });
$("#carousel").children("img").each(function() {
var oriWidth = $(this).width('');
var oriHeight = $(this).height('');
var bgWidth = $(window).width();
if (bgWidth < minWidth)
bgWidth = minWidth;
var bgHeight = bgWidth / oriWidth * oriHeight;
if (oriHeight < bgWrapperHeight)
bgWrapperHeight = oriHeight;
$(this).css({ 'position': 'absolute', 'width': bgWidth, 'height': bgHeight });
});
//start with window height & width
var bgWrapperHeight = $(window).height();
var bgWrapperWidth = $(window).width();
// if vertical scrollbar exists, accommodate the scrollbar width (16px)
if ($.browser.webkit == true) {
////$("#log").prepend(document.body.scrollHeight + " : " + document.body.clientHeight + "<br />");
if (document.body.scrollHeight < document.body.clientHeight)
bgWrapperWidth = $(window).width() - 16; // accomdate the scroll bar width (16px)
else
bgWrapperWidth = $(window).width();
}
else {
////$("#log").prepend($(document).height() + " : " + $(window).height() + "<br />");
if ($(window).height() < $(document).height())
bgWrapperWidth = $(window).width() - 17; //
else
bgWrapperWidth = $(window).width();
}
// for screen size > min height (hp-navigation) but < min background image size, adjust to fit without scroller
if (bgWrapperHeight + $('#bottomLayer').height() > $(window).height()) {
bgWrapperHeight = $(window).height() - $('#bottomLayer').height();
}
//wrapper height should not go lower than navigation height
if (bgWrapperHeight < $('#bookPanel').height())
bgWrapperHeight = $('#bookPanel').height();
//wrapper width should not go lower than min width
if (bgWrapperWidth < minWidth)
bgWrapperWidth = minWidth;
// set #hp-content-wrapper height
$('#homePageMainPanel').css({ 'height': bgWrapperHeight, 'width': bgWrapperWidth });
$('#carousel').css({ 'height': bgWrapperHeight, 'width': bgWrapperWidth });
$('#bottomLayer').css({ 'width': bgWrapperWidth });
$('html').css({ 'overflow': 'auto' });
//TODO: better way to center align bg image!
//var nn = 0;
// vertically middle align background
$("#carousel").children("img").each(function() {
// IF document height (minus footer height) is more than background image,
// Expand Background Image Vertically!
if (($(document).height() - $('#bottomLayer').height()) >= $(this).height()) {
var newHeight = $(document).height() - $('#bottomLayer').height();
var newWidth = Math.round((newHeight / $(this).height()) * $(this).width());
var offsetX = ((bgWrapperWidth - newWidth) / 2);
$(this).css({ 'position': 'absolute', 'left': offsetX, 'width': newWidth, 'height': newHeight });
// $("#log").prepend($(document).height() + " : " + $('#footer').height() + "<br />");
// Reset back the image top position to 0;
$(this).css({ 'position': 'absolute', 'top': 0 });
}
else { //TODO: figure out what contributes to offset??
var newWidth = $(document).width();
var newHeight = Math.round((newWidth / $(this).width()) * $(this).height());
var offsetX = ((bgWrapperWidth - newWidth) / 2);
// Reset back the image left position to 0;
$(this).css({ 'position': 'absolute', 'left': 0, 'width': newWidth, 'height': newHeight });
// $(this).css({ 'position': 'absolute', 'left': 0, 'width': '100%', 'height': '' });
if (bgWrapperHeight > $('#bottomLayer').position().top) {
var offsetY = ((bgWrapperHeight - $(this).height()) / 2);
$(this).css({ 'top': offsetY });
}
else {
var offsetY = (($('#bottomLayer').position().top - $(this).height()) / 2);
$(this).css({ 'top': offsetY });
}
}
});
//$(".bookPanel").css({ 'position': 'absolute', "top": parseInt($("#carousel").height()) });
$('#bottomLayer').css({ 'position': 'absolute', 'top': $("#carousel").height() });
$(".bookPanel").css({ "bottom": parseInt($(".bookPanel").height() - $("#carousel").height() + 28) });
$(".carouselShadow").css({ 'position': 'relative', "bottom": parseInt($(".carouselShadow").height() - $("#carousel").height()) });
//when having vertical scroll bar
//known issue: does not work for IE screen onresize, only works onload
if ($(window).height() != $(document).height()) {
//$("#roomreservations").html($(window).width() + ":" + $(document).width() + ":" + minWidth);
if ($(document).width() == minWidth && ($(window).width() != $(document).width())) {
//show horizontal scrollbar (by default)
}
else {
//otherwise hide horizontal scrollbar
$('html').css({ 'overflow-x': 'hidden' });
}
}
setTimeout('checkWidth(' + bgWrapperWidth + ')', 500);
readyToResize = true;
}
function checkWidth(bgWrapperWidth) {
$('#homePageMainPanel').width('100%');
$('#bottomLayer').width('100%');
$('#carousel').width($(document).width());
$("#carousel").children("img").each(function() {
if (($(document).height() - $('#bottomLayer').height()) >= $(this).height()) {
// Resize the image height to $("#background") height, as the image should fill from the top till the footer
$(this).css({ 'width': (($("#carousel").height() / $(this).height()) * $(this).width()), 'height': $("#carousel").height() });
}
});
}
function positionFooter() {
return null;
var footerPosition = $('#carousel').height() - $('#bottomLayer').height() + 1;
if ($('#carousel').height() < minHeight) {
footerPosition = minHeight - $('#carousel').height() + 1;
}
$('#carousel').css({ 'position': 'absolute', 'top': footerPosition });
$('html').css({ 'overflow': 'auto' });
$("#homePageMainPanel").css({ 'height': $('#carousel').height() });
}
var waitingTimeout;
function rotateBanner(param) {
var nextBanner = 0;
nextBanner = parseInt(currBanner) + 1;
if (nextBanner >= totalBanner) { nextBanner = 0; }
// wait until next bg image is fully loaded
if (imgReady[nextBanner] != true) {
waitingTimeout = window.setTimeout("rotateBanner('waiting')", timeWaiting);
return false;
}
clearTimeout(waitingTimeout);
transitionStart();
// cross fade
if (currBanner > -1) {
if (hybridMode) {
window.setTimeout("changeClass('quality','speed')", 500);
window.setTimeout("changeClass('speed','quality')", 1500);
}
fadeBgImg('#text_box_' + String(currBanner), 0, 500);
window.setTimeout("fadeBgImg('#img_box_" + String(currBanner) + "',0," + 1000 + ")", 500);
window.setTimeout("fadeBgImg('#img_box_" + String(nextBanner) + "',1," + 1000 + ")", 500);
window.setTimeout("fadeBgImg('#text_box_" + String(nextBanner) + "',1," + 1000 + ",true)", 1500);
window.setTimeout("transitionComplete()", 2500);
}
else {
if (hybridMode) {
changeClass('quality', 'speed');
window.setTimeout("changeClass('speed','quality')", 1000);
}
fadeBgImg("#img_box_" + String(nextBanner), 1, 1000);
window.setTimeout("fadeBgImg('#text_box_" + String(nextBanner) + "',1," + 1000 + ",true)", 1000);
window.setTimeout("showShadow()", 1000);
window.setTimeout("transitionComplete()", 2000);
}
currBanner = nextBanner;
}
function nextPaging(nextBanner) {
$('#carousel #paging ul li').each(function() {
if ($(this).attr('id') == 'paging_item_' + nextBanner) {
$(this).addClass("active");
}
else {
$(this).removeClass("active");
}
});
}
function changeClass(from, to) {
$("#carousel").removeClass(from).addClass(to);
}
function fadeBgImg(id, inout, duration, triggerTimer) {
$(id).stop(true, true);
if (inout == 1) {
$(id).fadeIn(duration);
}
else {
$(id).fadeOut(duration);
}
//$(id).animate({ 'opacity': inout }, duration);
if (triggerTimer == true) {
window.clearTimeout(theTimer);
if (totalBanner > 1) {
theTimer = window.setTimeout("rotateBanner()", timeTransInit + timeTransInterval);
}
}
}
function transitionStart() {
transitioning = true;
}
function transitionComplete() {
transitioning = false;
}
function Timer(callback, delay) {
var timerId, start, remaining = delay;
this.pause = function() {
window.clearTimeout(timerId);
remaining -= new Date() - start;
};
this.resume = function() {
start = new Date();
timerId = window.setTimeout(callback, remaining);
};
this.resume();
}
var waitingTimeout2;
function onBlur() {
//theTimer.pause();
clearTimeout(waitingTimeout2);
if (transitioning) {
waitingTimeout2 = window.setTimeout("onBlur()", timeWaiting);
return false;
}
window.clearTimeout(theTimer);
};
function onFocus() {
//theTimer.resume();
if (totalBanner > 1) {
window.clearTimeout(theTimer);
theTimer = window.setTimeout("rotateBanner()", timeTransInit + timeTransInterval);
}
};
if (/*#cc_on!#*/false) { // check for Internet Explorer
document.onfocusin = onFocus;
document.onfocusout = onBlur;
readyToRotate = true;
} else {
window.onfocus = onFocus;
window.onblur = onBlur;
readyToRotate = true;
}
function showShadow() {
// Do not fade in shadow png IE8 and below
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
$(".carouselShadow").delay(1000).show();
}
else {
$(".carouselShadow").delay(1000).fadeIn();
}
}

While it is great that you've built this yourself, someone has already solved all your problems with Backstretch.

Scroll if element is not visible

how to determine, using jquery, if the element is visible on the current page view. I'd like to add a comment functionality, which works like in facebook, where you only scroll to element if it's not currently visible. By visible, I mean that it is not in the current page view, but you can scroll to the element.

Live Demo
Basically you just check the position of the element to see if its within the windows viewport.
function checkIfInView(element){
var offset = element.offset().top - $(window).scrollTop();
if(offset > window.innerHeight){
// Not in view so scroll to it
$('html,body').animate({scrollTop: offset}, 1000);
return false;
}
return true;
}

Improving Loktar's answer, fixing the following:
Scroll up
Scroll to a display:none element (like hidden div's etc)
function scrollToView(element){
var offset = element.offset().top;
if(!element.is(":visible")) {
element.css({"visibility":"hidden"}).show();
var offset = element.offset().top;
element.css({"visibility":"", "display":""});
}
var visible_area_start = $(window).scrollTop();
var visible_area_end = visible_area_start + window.innerHeight;
if(offset < visible_area_start || offset > visible_area_end){
// Not in view so scroll to it
$('html,body').animate({scrollTop: offset - window.innerHeight/3}, 1000);
return false;
}
return true;
}

After trying all these solutions and many more besides, none of them satisfied my requirement for running old web portal software (10 years old) inside IE11 (in some compatibility mode). They all failed to correctly determine if the element was visible. However I found this solution. I hope it helps.
function scrollIntoViewIfOutOfView(el) {
var topOfPage = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var heightOfPage = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var elY = 0;
var elH = 0;
if (document.layers) { // NS4
elY = el.y;
elH = el.height;
}
else {
for(var p=el; p&&p.tagName!='BODY'; p=p.offsetParent){
elY += p.offsetTop;
}
elH = el.offsetHeight;
}
if ((topOfPage + heightOfPage) < (elY + elH)) {
el.scrollIntoView(false);
}
else if (elY < topOfPage) {
el.scrollIntoView(true);
}
}

I made a slightly more generic version of digitalPBK's answer that minimally scrolls an element contained within a div or some other container (including the body). You can pass DOM elements or selectors to the function, as long as the element is somehow contained within the parent.
function scrollToView(element, parent) {
element = $(element);
parent = $(parent);
var offset = element.offset().top + parent.scrollTop();
var height = element.innerHeight();
var offset_end = offset + height;
if (!element.is(":visible")) {
element.css({"visibility":"hidden"}).show();
var offset = element.offset().top;
element.css({"visibility":"", "display":""});
}
var visible_area_start = parent.scrollTop();
var visible_area_end = visible_area_start + parent.innerHeight();
if (offset-height < visible_area_start) {
parent.animate({scrollTop: offset-height}, 600);
return false;
} else if (offset_end > visible_area_end) {
parent.animate({scrollTop: parent.scrollTop()+ offset_end - visible_area_end }, 600);
return false;
}
return true;
}

You can take a look at his awesome link from the jQuery Cookbook:
Determining Whether an Element Is Within the Viewport
Test if Element is contained in the Viewport
jQuery(document).ready(function() {
var viewportWidth = jQuery(window).width(),
viewportHeight = jQuery(window).height(),
documentScrollTop = jQuery(document).scrollTop(),
documentScrollLeft = jQuery(document).scrollLeft(),
$myElement = jQuery('#myElement'),
elementOffset = $myElement.offset(),
elementHeight = $myElement.height(),
elementWidth = $myElement.width(),
minTop = documentScrollTop,
maxTop = documentScrollTop + viewportHeight,
minLeft = documentScrollLeft,
maxLeft = documentScrollLeft + viewportWidth;
if (
(elementOffset.top > minTop && elementOffset.top + elementHeight < maxTop) &&
(elementOffset.left > minLeft && elementOffset.left + elementWidth < maxLeft)
) {
alert('entire element is visible');
} else {
alert('entire element is not visible');
}
});
Test how much of the element is visible
jQuery(document).ready(function() {
var viewportWidth = jQuery(window).width(),
viewportHeight = jQuery(window).height(),
documentScrollTop = jQuery(document).scrollTop(),
documentScrollLeft = jQuery(document).scrollLeft(),
$myElement = jQuery('#myElement'),
verticalVisible, horizontalVisible,
elementOffset = $myElement.offset(),
elementHeight = $myElement.height(),
elementWidth = $myElement.width(),
minTop = documentScrollTop,
maxTop = documentScrollTop + viewportHeight,
minLeft = documentScrollLeft,
maxLeft = documentScrollLeft + viewportWidth;
function scrollToPosition(position) {
jQuery('html,body').animate({
scrollTop : position.top,
scrollLeft : position.left
}, 300);
}
if (
((elementOffset.top > minTop && elementOffset.top < maxTop) ||
(elementOffset.top + elementHeight > minTop && elementOffset.top +
elementHeight < maxTop))
&& ((elementOffset.left > minLeft && elementOffset.left < maxLeft) ||
(elementOffset.left + elementWidth > minLeft && elementOffset.left +
elementWidth < maxLeft)))
{
alert('some portion of the element is visible');
if (elementOffset.top >= minTop && elementOffset.top + elementHeight
<= maxTop) {
verticalVisible = elementHeight;
} else if (elementOffset.top < minTop) {
verticalVisible = elementHeight - (minTop - elementOffset.top);
} else {
verticalVisible = maxTop - elementOffset.top;
}
if (elementOffset.left >= minLeft && elementOffset.left + elementWidth
<= maxLeft) {
horizontalVisible = elementWidth;
} else if (elementOffset.left < minLeft) {
horizontalVisible = elementWidth - (minLeft - elementOffset.left);
} else {
horizontalVisible = maxLeft - elementOffset.left;
}
var percentVerticalVisible = (verticalVisible / elementHeight) * 100;
var percentHorizontalVisible = (horizontalVisible / elementWidth) * 100;
if (percentVerticalVisible < 50 || percentHorizontalVisible < 50) {
alert('less than 50% of element visible; scrolling');
scrollToPosition(elementOffset);
} else {
alert('enough of the element is visible that there is no need to scroll');
}
} else {
// element is not visible; scroll to it
alert('element is not visible; scrolling');
scrollToPosition(elementOffset);
}

The following code helped me achieve the result
function scroll_to_element_if_not_inside_view(element){
if($(window).scrollTop() > element.offset().top){
$('html, body').animate( { scrollTop: element.offset().top }, {duration: 400 } );
}
}

Here is the solution I came up with, working both up and down and using only Vanilla Javascript, no jQuery.
function scrollToIfNotVisible(element) {
const rect = element.getBoundingClientRect();
// Eventually an offset corresponding to the height of a fixed navbar for example.
const offset = 70;
let scroll = false;
if (rect.top < offset) {
scroll = true;
}
if (rect.top > window.innerHeight) {
scroll = true;
}
if (scroll) {
window.scrollTo({
top: (window.scrollY + rect.top) - offset,
behavior: 'smooth'
})
}
}

There is a jQuery plugin which allows us to quickly check if a whole element (or also only part of it) is within the browsers visual viewport regardless of the window scroll position. You need to download it from its GitHub repository:
Suppose to have the following HTML and you want to alert when footer is visible:
<section id="container">
<aside id="sidebar">
<p>
Scroll up and down to alert the footer visibility by color:
</p>
<ul>
<li><span class="blue">Blue</span> = footer <u>not visible</u>;</li>
<li><span class="yellow">Yellow</span> = footer <u>visible</u>;</li>
</ul>
<span id="alert"></span>
</aside>
<section id="main_content"></section>
</section>
<footer id="page_footer"></footer>
So, add the plugin before the close of body tag:
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery_visible/examples/js/jq.visible.js"></script>
After that you can use it in a simple way like this:
<script type="text/javascript">
jQuery( document ).ready(function ( $ ) {
if ($("footer#page_footer").visible(true, false, "both")) {
$("#main_content").css({"background-color":"#ffeb3b"});
$("span#alert").html("Footer visible");
} else {
$("#main_content").css({"background-color":"#4aafba"});
$("span#alert").html("Footer not visible");
}
$(window).scroll(function() {
if ($("footer#page_footer").visible(true, false, "both")) {
$("#main_content").css({"background-color":"#ffeb3b"});
$("span#alert").html("Footer visible");
} else {
$("#main_content").css({"background-color":"#4aafba"});
$("span#alert").html("Footer not visible");
}
});
});
</script>
Here a demo

No-JQuery version.
The particular case here is where the scroll container is the body (TBODY, table.body) of a TABLE (scrolling independently of THEAD). But it could be adapted to any situation, some simpler.
const row = table.body.children[ ... ];
...
const bottomOfRow = row.offsetHeight + row.offsetTop ;
// if the bottom of the row is in the viewport...
if( bottomOfRow - table.body.scrollTop < table.body.clientHeight ){
// ... if the top of the row is in the viewport
if( row.offsetTop - table.body.scrollTop > 0 ){
console.log( 'row is entirely visible' );
}
else if( row.offsetTop - table.body.scrollTop + row.offsetHeight > 0 ){
console.log( 'row is partly visible at top')
row.scrollIntoView();
}
else {
console.log( 'top of row out of view above viewport')
row.scrollIntoView();
}
}
else if( row.offsetTop - table.body.scrollTop < table.body.clientHeight ){
console.log( 'row is partly visible at bottom')
row.scrollIntoView();
}
else {
console.log( 'row is out of view beneath viewport')
row.scrollIntoView();
}

I think this is the complete answer. An elevator must be able to go both up and down ;)
function ensureVisible(elementId, top = 0 /* set to "top-nav" Height (if you have)*/) {
let elem = $('#elementId');
if (elem) {
let offset = elem.offset().top - $(window).scrollTop();
if (offset > window.innerHeight) { // Not in view
$('html,body').animate({ scrollTop: offset + top }, 1000);
} else if (offset < top) { // Should go to top
$('html,body').animate({ scrollTop: $(window).scrollTop() - (top - offset) }, 1000);
}
}
}