CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Ave
Ave

Reputation: 4430

jQuery windows scroll event not working

I create the single page.

I want to change CSS when scroll event is active.

So, I tried it with code like this:

var $navscroll = $('nav.nav-next');
$(document).scroll(function() {
  alert($(this).scrollTop());	
  $navscroll.css({left: $(this).scrollTop()>10 ? "65%":"35%"});
});
.nav-next {
  z-index: 99;
  position: absolute;
  left: 35%;
  top: 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav class="nav-next">
  <button type="button" id="btn-next" class="btn i-down" style="background: rgb(10, 49, 80);">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="16" height="10" viewBox="0 0 16 10" enable-background="new 0 0 16 10" xml:space="preserve" style="fill: rgb(255, 255, 255);"><polygon points="14 0 8 6 2 0 0 2 8 10 16 2 "></polygon></svg>
    <span class="btn-bg btn-bg-mask" style="background: rgb(10, 49, 80);"></span>
  </button>
</nav>

But when I tried to scroll it not happen anything.

Upvotes: 0

Views: 1071

Answers (3)

Rohit
Rohit

Reputation: 1802

Its because that page don't have sufficient height to scroll. Increase page height or container height to allow scroll. Check snippet.

The scroll event is sent to an element when the user scrolls to a different place in the element. It applies to window objects, but also to scrollable frames and elements with the overflow CSS property set to scroll (or auto when the element's explicit height or width is less than the height or width of its contents).

var $navscroll = $('nav.nav-next');
$(document).scroll(function() {
	alert($(this).scrollTop());	
  $navscroll.css({left: $(this).scrollTop()>10 ? "65%":"35%"});
});
.nav-next {
  z-index: 99;
  position: absolute;
  left: 35%;
  top: 60%;
}

div {
background: #000;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<nav class="nav-next">
	<button type="button" id="btn-next" class="btn i-down" style="background: rgb(10, 49, 80);">
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="16" height="10" viewBox="0 0 16 10" enable-background="new 0 0 16 10" xml:space="preserve" style="fill: rgb(255, 255, 255);"><polygon points="14 0 8 6 2 0 0 2 8 10 16 2 "></polygon></svg>
		<span class="btn-bg btn-bg-mask" style="background: rgb(10, 49, 80);"></span>
	</button>
  
</nav>
<div> test scroll</div>

Upvotes: 1

frnt
frnt

Reputation: 8795

Your codes are working fine but you need to add height to your html body tag to scroll and see the output of moving that image, as below.

body{
  height:1200px;
}


var $navscroll = $('nav.nav-next');
$(document).on('scroll',function() {
  alert($(this).scrollTop());	
  $navscroll.css({left: $(this).scrollTop()>10 ? "65%":"35%"});
});
.nav-next {
  z-index: 99;
  position: absolute;
  left: 35%;
  top: 60%;
}
body{
  height:1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav-next">
  <button type="button" id="btn-next" class="btn i-down" style="background: rgb(10, 49, 80);">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="16" height="10" viewBox="0 0 16 10" enable-background="new 0 0 16 10" xml:space="preserve" style="fill: rgb(255, 255, 255);"><polygon points="14 0 8 6 2 0 0 2 8 10 16 2 "></polygon></svg>
    <span class="btn-bg btn-bg-mask" style="background: rgb(10, 49, 80);"></span>
  </button>
</nav>

Upvotes: 1

bbop99
bbop99

Reputation: 1685

I would suggest triggering the scroll even on window as opposed to document.

So something like this: $(window).scroll(..)

Also generally wrap your code in:

$(document).ready(function() { // Your Code });

to make sure all your elements are available when you select them.

Upvotes: 0

Related Questions