I am trying to trigger an event on scroll at certain height.
Specifically yo add a style, and my code works in Chrome, but not in IE.
Can anyone assist?
myID = document.getElementById("subnav");
var myScrollFunc2 = function() {
var y = window.scrollY;
if (y >= 150) {
myID.className = "subnav stick";
} else {
myID.className = "subnav unstick";
}
};
window.addEventListener("scroll", myScrollFunc2);
.subnav {
width: 100%;
z-index: 100;
background-color: #ffffff;
}
.stick {
top: -62px;
position: fixed !important;
}
.unstick {
position: relative !important;
}
<div id="subnav">123</div>
IE doesn't support scrollY.
You can do this instead:
'scrollY' in window ? window.scrollY : document.documentElement.scrollTop
I've came accross an answer searching on SO
var scroll =
window.scrollY // Modern Way (Chrome, Firefox)
|| window.pageYOffset // (Modern IE, including IE11)
|| document.documentElement.scrollTop // (Old IE, 6,7,8)
Credits goes to this SO link
Related
I want to know how to pinpoint the line/position of code which is altering a specific DOM element or it's style.
With Chrome DOMListner I see which elements get changed and what is the change but I cannot figure out which line of script caused that DOM change.
Example
jsfiddle
HTML
<div class="red circle absolute"></div>
CSS
body {
margin: 0;
padding: 0;
font-size: 10px;
}
.red {
background-color: #F44336;
/* Material design 500 tint Red color */
}
.circle {
height: 3em;
width: 3em;
border-radius: 50%;
}
.absolute {
position: absolute;
top: 0;
left: 0;
}
JS
document.onmousemove = function (e) {
// source: http://stackoverflow.com/questions/11245119/how-to-get-mouse-pointer-position-using-javascript-for-internet-explorer
// as on: 28.09.2015
var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
var el = document.getElementsByTagName('div')[0];
el.style.left = (x - 15) + 'px';
el.style.top = (y - 15) + 'px';
}
jsfiddle shows a circle which follows the mouse cursor. Circle is positioned absolutely and onmousemove event triggers the change of circle position. This example is over-simplified and one can easily see where the top and left properties of a DOM element are changed.
I would like to find a method of finding the exact line/position of code for any JS script I stumble upon. Thanks
In Chrome's developer tools, this option is available if you right click on a specific element. Selecting Break on... and then one of the sub-options will cause Chrome to break on the JavaScript line that made the change, so long as you had the tools open at the time.
It's easy to keep a column in my layout fixed so it's always visible, even when the user scrolls down.
It's also easy to only move the column down the page when the page is scrolled down far enough for it to be out of the viewport so it's anchored before scrolling starts.
My problem is, I have left hand column that is taller than the average window so you need to be able to scroll down to see all the content (controls) in the left column but at the same time when you scroll up you want to see the top of the controls again.
Here's a visual of what I want to accomplish:
So the left column is always occupying 100% of the height of the window but as the user scrolls down they can see the bottom of the div, and when they start to scroll up the scrolls up until it reaches the top of the window again. So no matter how far they scroll the page, the top of the div is always nearby.
Is there some jQuery magic to make this happen?
Did you mean something like this? (Demo)
var sidebar = document.getElementById('sidebar');
var sidebarScroll = 0;
var lastScroll = 0;
var topMargin = sidebar.offsetTop;
sidebar.style.bottom = 'auto';
function update() {
var delta = window.scrollY - lastScroll;
sidebarScroll += delta;
lastScroll = window.scrollY;
if(sidebarScroll < 0) {
sidebarScroll = 0;
} else if(sidebarScroll > sidebar.scrollHeight - window.innerHeight + topMargin * 2) {
sidebarScroll = sidebar.scrollHeight - window.innerHeight + topMargin * 2;
}
sidebar.style.marginTop = -sidebarScroll + 'px';
}
document.addEventListener('scroll', update);
window.addEventListener('resize', update);
#sidebar {
background-color: #003;
bottom: 1em;
color: white;
left: 1%;
overflow: auto;
padding: 1em;
position: fixed;
right: 80%;
top: 1em;
}
body {
line-height: 1.6;
margin: 1em;
margin-left: 21%;
}
It almost degrades gracefully, too…
I made a fiddle for you, hope this helps you out abit.
I detect scroll up or scroll down, and set the fixed position accordion to the direction.
http://jsfiddle.net/8eruY/
CSS
aside {
position:fixed;
height:140%;
background-color:red;
width:100px;
top:20px;
left:20px;
}
Javascript
//Detect user scroll down or scroll up in jQuery
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('html').bind(mousewheelevt, function(e){
var evt = window.event || e //equalize event object
evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible
var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF
if(delta > 0) {
$('aside').css('top', '20px');
$('aside').css('bottom', 'auto');
}
else{
$('aside').css('bottom', '20px');
$('aside').css('top', 'auto');
}
});
http://jsfiddle.net/KCrFe/
or this:
.top-aligned {
position: fixed;
top: 10px;
}
with
var scrollPos
$(window).scroll(function(event){
var pos = $(this).scrollTop();
if ( pos < scrollPos){
$('.sidebar').addClass('top-aligned');
} else {
$('.sidebar').removeClass('top-aligned');
}
scrollPos = pos;
});
I have implemented a parallax scrolling effect based on a tutorial I found. The effect works great. However, when I specify the background images, I am unable to control the y (vertical) axis. This is causing problems because I'm trying to set locations on multiple layered images.
Any thoughts on what's causing the problem?
Here is one external script:
$(document).ready(function(){
$('#nav').localScroll(800);
//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#mainimagewrapper').parallax("50%", 1.3);
$('#secondaryimagewrapper').parallax("50%", 0.5);
$('.image2').parallax("50%", -0.1);
$('#aboutwrapper').parallax("50%", 1.7);
$('.image4').parallax("50%", 1.5);
})
This is another external script:
(function( $ ){
var $window = $(window);
var windowHeight = $window.height();
$window.resize(function () {
windowHeight = $window.height();
});
$.fn.parallax = function(xpos, speedFactor, outerHeight) {
var $this = $(this);
var getHeight;
var firstTop;
var paddingTop = 0;
//get the starting position of each element to have parallax applied to it
$this.each(function(){
firstTop = $this.offset().top;
});
if (outerHeight) {
getHeight = function(jqo) {
return jqo.outerHeight(true);
};
} else {
getHeight = function(jqo) {
return jqo.height();
};
}
// setup defaults if arguments aren't specified
if (arguments.length < 1 || xpos === null) xpos = "50%";
if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
if (arguments.length < 3 || outerHeight === null) outerHeight = true;
// function to be called whenever the window is scrolled or resized
function update(){
var pos = $window.scrollTop();
$this.each(function(){
var $element = $(this);
var top = $element.offset().top;
var height = getHeight($element);
// Check if totally above or totally below viewport
if (top + height < pos || top > pos + windowHeight) {
return;
}
$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
});
}
$window.bind('scroll', update).resize(update);
update();
};
})(jQuery);
Here is the CSS for one section:
#aboutwrapper {
background-image: url(../images/polaroid.png);
background-position: 50% 0;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
height: 500px;
width: 100%;
margin: 0 auto;
padding: 0;
}
#aboutwrapper .image4 {
background: url(../images/polaroid2.png) 50% 0 no-repeat fixed;
height: 500px;
width: 100%;
margin: 0 auto;
padding: 0;
}
.image3{
margin: 0 auto;
min-width: 970px;
overflow: auto;
width: 970px;
}
Both of these are being called to achieve the parallax scrolling. I really just want to more specifically control the background image locations. I've tried messing with the CSS background position and I've messed with the first javascript snippet as well. No luck.
just a quick shot, have you tried actually placing the images, either in a div or just using the img src tag to actually move the element rather than manipulating the y axis of a background image?
Refer the thread : Div at the browser bottom
Problem image :
http://i.imgur.com/I9vVv.png
http://i.stack.imgur.com/jTU5U.png
I used all the methods and it all went in wain. Is there any method in Jquery to place a div at the bottom if even the page is scrolled ?
Thanks in Advance
For browsers other than IE6, use position: fixed is enough:
#footer {
position: fixed !important; /* IE6 hack */
position: absolute;
right: 0;
bottom: 0;
background: yellow;
}
For IE6, a general approach is to register the scroll event and dynamically change the top style property of #footer
var footer = document.getElementById('footer');
// Test IE6
if (footer.currentStyle &&
footer.currentStyle.position !== 'fixed') {
// Set bottom to 'auto' because we would use top property
footer.style.bottom = 'auto';
// Only for IE6, so use window.attachEvent
window.attachEvent(
'onscroll',
function() {
var scrollTop = document.documentElement.scrollTop;
var pageHeight = document.documentElement.offsetHeight;
var height = footer.offsetHeight;
footer.style.top = (scrollTop + pageHeight - height) + 'px';
}
);
}
I'm hoping to find a way to get the current viewable window's position (relative to the total page width/height) so I can use it to force a scroll from one section to another. However, there seems to be a tremendous amount of options when it comes to guessing which object holds the true X/Y for your browser.
Which of these do I need to make sure IE 6+, FF 2+, and Chrome/Safari work?
window.innerWidth
window.innerHeight
window.pageXOffset
window.pageYOffset
document.documentElement.clientWidth
document.documentElement.clientHeight
document.documentElement.scrollLeft
document.documentElement.scrollTop
document.body.clientWidth
document.body.clientHeight
document.body.scrollLeft
document.body.scrollTop
And are there any others? Once I know where the window is I can set an event chain that will slowly call window.scrollBy(x,y); until it reaches my desired point.
The method jQuery (v1.10) uses to find this is:
var doc = document.documentElement;
var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
That is:
It tests for window.pageXOffset first and uses that if it exists.
Otherwise, it uses document.documentElement.scrollLeft.
It then subtracts document.documentElement.clientLeft if it exists.
The subtraction of document.documentElement.clientLeft / Top only appears to be required to correct for situations where you have applied a border (not padding or margin, but actual border) to the root element, and at that, possibly only in certain browsers.
Maybe more simple;
var top = window.pageYOffset || document.documentElement.scrollTop,
left = window.pageXOffset || document.documentElement.scrollLeft;
Credits: so.dom.js#L492
Using pure javascript you can use Window.scrollX and Window.scrollY
window.addEventListener("scroll", function(event) {
var top = this.scrollY,
left =this.scrollX;
}, false);
Notes
The pageXOffset property is an alias for the scrollX property, and The
pageYOffset property is an alias for the scrollY property:
window.pageXOffset == window.scrollX; // always true
window.pageYOffset == window.scrollY; // always true
Here is a quick demo
window.addEventListener("scroll", function(event) {
var top = this.scrollY,
left = this.scrollX;
var horizontalScroll = document.querySelector(".horizontalScroll"),
verticalScroll = document.querySelector(".verticalScroll");
horizontalScroll.innerHTML = "Scroll X: " + left + "px";
verticalScroll.innerHTML = "Scroll Y: " + top + "px";
}, false);
*{box-sizing: border-box}
:root{height: 200vh;width: 200vw}
.wrapper{
position: fixed;
top:20px;
left:0px;
width:320px;
background: black;
color: green;
height: 64px;
}
.wrapper div{
display: inline;
width: 50%;
float: left;
text-align: center;
line-height: 64px
}
.horizontalScroll{color: orange}
<div class=wrapper>
<div class=horizontalScroll>Scroll (x,y) to </div>
<div class=verticalScroll>see me in action</div>
</div>
Maybe this has not been mentioned due to this article been 11 years old.
But currently I am using window.scrollY (inside an onscroll event listner and a throttle function) and it works just fine most of the time.
And when it doesn't I use intersectionObserver API for similar effect which is also a fairly new feature I guess.
if (window.scrollY > desiredAmount) {
doThis();
}
function FastScrollUp()
{
window.scroll(0,0)
};
function FastScrollDown()
{
$i = document.documentElement.scrollHeight ;
window.scroll(0,$i)
};
var step = 20;
var h,t;
var y = 0;
function SmoothScrollUp()
{
h = document.documentElement.scrollHeight;
y += step;
window.scrollBy(0, -step)
if(y >= h )
{clearTimeout(t); y = 0; return;}
t = setTimeout(function(){SmoothScrollUp()},20);
};
function SmoothScrollDown()
{
h = document.documentElement.scrollHeight;
y += step;
window.scrollBy(0, step)
if(y >= h )
{clearTimeout(t); y = 0; return;}
t = setTimeout(function(){SmoothScrollDown()},20);
}