I have a vh based website with elements I want to show when a certain vh has been scrolled. I tried using an if statement with a variable for distance scrolled, but it doesn't update constantly so it doesn't work:
var distancePX = $(window).scrollTop();
var windowHeight = $(window).height();
var distanceVH = scroll/height * 100;
if (distance >= 170) {
//ACTIONS
};
What can I use to make a constantly updating version of above?
Using pure JS, you could use the onscroll event and bind it to the body. Here's an example:
HTML
<body onscroll="myFunction()">
...
</body>
JS
var distancePX = $(window).scrollTop();
var windowHeight = $(window).height();
var distanceVH = scroll/height * 100;
function myFunction() {
if (distance >= 170) {
//ACTIONS
}
}
You can also use jQuery's scroll() method if you prefer a non-markup solution. With this method, you just place your if statement inside a scroll() function. Here's an example:
var distancePX = $(window).scrollTop();
var windowHeight = $(window).height();
var distanceVH = scroll/height * 100;
$("body").scroll(function(){
if (distance >= 170) {
//ACTIONS
}
});
Hope this helps!
Jquery Code
$(window).scroll(function(){
if ($(this).scrollTop() >= 170) {
//actions...
} else {
//actions...
}
});
Related
I have the following code which resizes the height of a targeted element
but it only works with resize event, not when the page is loaded.
What could be the flaw here that doesn't set the height dynamically with the page load?
I'd also like to know how I can make the iterated codes into a modular structure in
this scenario.
$(window).resize(function() {
var viewportHeight = $(window).height();
var search = $(#something).outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
});
$(function () {
var viewportHeight = $(window).height();
var search = $("#something").outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
});
How about something like this:
var resizeGrid = function() {
var viewportHeight = $(window).height();
var search = $("#something").outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
};
$(window).resize(function() {
resizeGrid();
});
$(document).ready(function () {
$(window).trigger("resize");
});
Use document.ready:
$( document ).ready(function() {
var viewportHeight = $(window).height();
var search = $("#something").outerHeight();
$(".k-grid-content").height(viewportHeight - (400 - search));
});
$(document).on(".wrapper-parallax", function(){
var height = $(window).width() / 8;
$(this).css("margin-top",height);
}
this code seem doesn't run in 'real time', I want the result (margin-top's value) to change along I resizing the window.
You need to write a window resize handler
$(window).resize(function () {
var height = $(window).width() / 8; //may be height() here instead of width()
$(".wrapper-parallax").css("margin-top", height);
}).resize()
You are missing trailing px
Try:
$(document).on(".wrapper-parallax", function(){
var height = $(window).width() / 8;
$(this).css("margin-top",height+"px");
}
Try this:
$(window).resize(function(){
var height = $(this).height() / 8;
$('.wrapper-parallax').css("margin-top", height + 'px');
}
I am a little confused on how to keep some variables Ive created uptodate when the window is resized so my scroll function carries on getting the correct values. Basically I have multiple elements that contain a message that gets displayed when the user scrolls the element into 50% height of the viewport height. This works fine but my issue is when I resize I'm not sure how to update my variables boxHeight, elementOffset, verticalMatch which keep control of the values I need to use in my scroll event. I was wondering can someone help explain how I can resolve this?
My code looks like this
var windowHeight = $(window).height(),
headerHeight = $('.header').height();
$('.box').each(function (i,e) {
var el = $(e);
var boxHeight = el.height(),
elementOffset = el.offset().top,
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
distance = elementOffset - scrollTop;
if( distance <= verticalMatch ) {
el.addClass('is-active');
}
});
});
$(window).on('resize', function() {
windowHeight = $(window).height()
elementOffset = $('.box').offset().top;
$('.box').each(function (i,e) {
var el = $(e);
//update boxHeight, elementOffset, verticalMatch
verticalMatch = (windowHeight / 2) + (headerHeight / 2) - (boxHeight / 2);
});
});
And heres the JS Fiddle: http://jsfiddle.net/fm4z7/2/
If someone could explain how I do this it would be great!
If all you want to do is update your sizing variables during a resize event, then do just that:
$(window).on('resize', function() {
windowHeight = $(window).height();
elementOffset = $('.box').offset().top;
});
Your variables are global so they can be accessed anywhere.
I have a fixed position div that I want to have position left: 0 when the browser window is smaller than 1200px, but no left positioning when larger than 1200px. I'm using this code
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
document.write(windowsize);
if (windowsize < 1200) {
document.getElementById("DBCIbox").style.left = "0";
} else {50
document.getElementById("DBCIbox").style.left = "500px";
}
}
checkWidth();
$(window).resize(checkWidth);
but it doesnt seem to be doing anything. I'm setting the left=500px as simply a test to get the javascript working, then I'll worry about where I want to position it.
I've done some googleing and from what I can tell this should work, what am I missing?
If theres a way to clear the left positioning I'd like to know that as well.
var $window = $(window);
That line is cacheing that instance of window. You need to re-evaluate $(window) everytime you call this code to get updated width and height values
Updated code below
function checkWidth() {
var $window = $(window);
var windowsize = $window.width();
document.write(windowsize);
if (windowsize < 1200) {
document.getElementById("DBCIbox").style.left = "0";
} else {50
document.getElementById("DBCIbox").style.left = "500px";
}
}
checkWidth();
$(window).resize(checkWidth);
#Jnatalzia had it right, I needed to make a few tweaks, and the comments wouldn't let me post the code, but credit goes to #Jnatalzia for the answer.
function checkWidth() {
var $window = $(window);
var windowsize = $window.width();
var position;
if (windowsize < 1390) {
document.getElementById("DBCIbox").style.marginLeft = 0 + "px";
} else if (windowsize >= 1390) {
position = windowsize - 1060;
position = position / 2;
position = position - 175;
document.getElementById("DBCIbox").style.marginLeft = position + "px";
}
}
$("document").ready(function(){
$(window).load(function(){
checkWidth();
});
$(window).resize(function(){
checkWidth();
});
});
I have a sort of sidebar on my website, which has to scroll down together with the user so that it is always in the view.
The code I'm using now is actually working fine however there is one problem. On smaller screens the sidebar scrolls before your at the sidebar thus making it impossible to see it all even if you scroll.
So what I want is the sidebar to scroll with the bottom instead of it being pushed down with the top so that when you reach the end of the sidebar it starts to scroll.
This is the code that I'm currently using.
var documentHeight = 0;
var topPadding = 10;
$(function() {
var offset = $("#mainright").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $("#mainright").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$("#mainright").stop().animate({
marginTop: newPosition
});
} else {
$("#mainright").stop().animate({
marginTop: 0
});
};
});
});
I guess the "best practice" for accomplishing a task like this is to use dynamically changing css position from absolute to fixed and vice versa. A basic example could look like:
$(function(){
var $box = $('.box'),
offset = $box.offset(),
doc_h = $(document).height();
$(window).scroll(function(){
if($(window).scrollTop() > offset.top) {
if(!$box.hasClass('fix'))
$box.toggleClass('normal fix');
}
else{
if(!$box.hasClass('normal'))
$box.toggleClass('normal fix');
}
});
});
Example in action: http://www.jsfiddle.net/YjC6y/14/
$(function() {
var top = 50;
$(window).scroll(function() {
$('#box').stop().animate({ top: $(window).scrollTop() + top}, 1000);
});
});
Try the example : http://jsbin.com/omiyi3
I think you can instead make the sidebar responsive by throwing your function into one of these:
if (responsive_viewport >= 768) {}
This makes it so that the function will only load if the viewport is bigger than or equal to 768px.