<script>
document.getElementById('listen-btn').addEventListener('click', function() {
document.getElementById('music-player').play();
});
<script>
$(window).scroll(function() {
if($(window).scrollTop() > 1400)
document.querySelector('#music-player').pause();
});
</script>
The button starts the audio player and scrolls to the section where the audio player is visible. When you scroll the the next section the audio player stops once you've scrolled 1400 but I need that to be relative. How to I make the 1400 a percentage (50%)
That is possible — some arithmetic will do the job. The trick is to retrieve the page height using $(document).height(). If you're referring to the viewport height though, then you will need to use $(window).height().
$(window).scroll(function() {
if($(window).scrollTop() > $(document).height()*0.5)
document.querySelector('#music-player').pause();
});
Try to use this code:
$(window).on('scroll', function() {
var st = $(this).scrollTop();
var wh = $(document).height();
// st : wh = X : 100
// x = (st*100)/wh
var perc = (st*100)/wh
// Your percentage is contained in perc variable
console.log('The percentage is '+perc);
});
Related
I want to stop scroll after a dynamic div reaches its end. This div will be holding dynamic content so the size never stays the same. I know how to lock in position when scroll hits a pre-defined height, but not sure how to do it when the hight is constantly changing. here's what i'm using for my standard locking scroll when it hits specific point:
var profile_rc = $("#profile-rc");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 285) {
profile_rc.addClass("p-right-column");
} else {
profile_rc.removeClass("p-right-column");
}
});
Looks like you are using jQuery, the following 2 examples might help.
Detecting dynamic height of screen
<script>
$(function(){
var windowHeight = $(window).height();
$(window).resize(function() {
windowHeight = $(window).height();
console.log(windowHeight);
});
});
<script>
Detecting dynamic height of a div
<script>
$(function(){
var divHeight = $('#your-div-id').css("height");
$( window ).on("resize", function() {
divHeight = $('#your-div-id').css("height");
console.log(divHeight);
});
});
</script>
I got it to work doing this:
$(window).scroll(function() {
var divHeight = $('#farleft-cont').outerheight(true);
var ycbc = $('#target-div');
var scroll = $(window).scrollTop();
if (scroll >= divHeight) {
ycbc.addClass("target-div-fixed");
} else {
ycbc.removeClass("target-div-fixed");
}
});
I'm looking to find the HTML element or content which occupies the pixel position on a page. I am using currently using jQuery to find the scrollTop() position:
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
console.log(scroll);
// Do something
});
to understand the $(window).scrollTop() position, but I'd like to know what occupies the space. E.g., if a user scrolls to '300', what HTML element or content is there?
Scrolltop code from How to detect scroll position of page using jQuery
function checkElement(el){
var windowHeight = $(window).height();
var scroll = $(window).scrollTop();
var elementPosition = el.height() + el.position().top;
if (elementPosition > scroll && elementPosition < windowHeight + scroll){
return true;
}
return false;
}
I'm trying make the opacity of my div gradually increasing, as will moving the scroll, like this
$(document).ready(function() {
$(document).scroll(function(e) {
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade() {
var opacityPercent = window.scrollY / 100;
if (scrollPercent <= 1) {
element.css('opacity', opacityPercent);
}
}
});
is working but the opacity is uping very fast i find example decrease opacity but no uping upacity if in my rule css my div is declared opacity 0 any knwo how should be
Altered:
jsFiddle
$(document).ready(function() {
$(document).scroll(function(e){
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade(){
var opacityPercent = window.scrollY / $(document).height();
console.log(window.scrollY, opacityPercent);
element.css('opacity', opacityPercent);
}
});
The scrollY is a pixel value, so unless you limit your possible scroll range [0 - 100], there's no reason to divide it by 100.
So what you need is divide the scroll by the total document's height (or whatever it's parent that contains it and display a scrollbar)
I want to change the var num into a percentage instead of a number of pixels.
how can I do this?
I need this for my site:
http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/
But they work with pixels, and my website works with % (because autoscaling for example on a HD screen or a Full HD screen)
/* Dynamic top menu positioning
*
*/
var num = 150 ; //number of pixels before modifying styles 150
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
//USE SCROLL WHEEL FOR THIS FIDDLE DEMO
First, let me tell you this is a horrible solution. Listening to every scroll event and calling addClass() or removeClass() every time is expensive. // end preach
Here's the answer to your question anyway:
var baseHeight = $(window).height(); // for body, use $("body").height();
var num = .25; // this the percentage of vertical scroll
$(window).bind('scroll', function () {
if ($(window).scrollTop() / baseHeight > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
I'm trying create an alert saying "True" when the user scrolls past the "#topp" element, yet it isn't doing anything, the element is just supposed to be a tiny div at the top of the page.
HTML
<div id="topp"></div>
jQuery
$(window).scroll(function() {
var vpH = $(window).height(),
st = $(window).scrollTop(),
y = $('#topp').offset().top;
if(y > (st + vpH)) alert('true');
});
Why do you need the window height? If you have the top and the scroll to top variables then theirs no need for the height of the window.
$(document).scroll(function()
{
var scrollTop = $(window).scrollTop();
var toppOffset = $('#topp').offset().top;
if(toppOffset > scrollTop)
alert('true');
});
A clearer representation http://jsfiddle.net/zDpw3/1/