CODEWITHSUNDEEP
javascriptjquerycss
Ben Daggers
Ben Daggers

Reputation: 992

Fixed scroll div after certain height and then stops after reach other div?

As the title suggest, I am making a div with a fixed attributes then stops when the user reaches a certain point scrolling.

Below is a GIF sample of the event i'm trying to replicate.

http://i.imgur.com/wCXAOwW.gifv

and here's my fiddle:

https://jsfiddle.net/e1u4rqtk/2/

var navWrap = $('#cont'),
  nav = $('cont'),
  startPosition = navWrap.offset().top,
  stopPosition = $('#stop').offset().top - nav.outerHeight();

$(document).scroll(function() {
  //stick nav to top of page
  var y = $(this).scrollTop()

  if (y > startPosition) {
    nav.addClass('sticky');
    if (y > stopPosition) {
      nav.css('top', stopPosition - y);
    } else {
      nav.css('top', 0);
    }
  } else {
    nav.removeClass('sticky');
  }
});

But its not properly working. any idea what did i miss?

Upvotes: 0

Views: 1225

Answers (2)

Solomon Tam
Solomon Tam

Reputation: 739

You can use position: sticky for newer version of browser, but in case you want your website work under IE/Edge 15, check out this example.

$(function(){

	$("#adArea").css("min-height", $("#adArea").height());
	
	var stopPos = $("#ad").offset().top;
	var contPost = $("#adArea").next().offset().top - $("#ad").height();
	
	$(document).scroll(function(){
		var scrollTop = $(this).scrollTop();
		
		if(scrollTop >= stopPos){
			if(!$("#ad").hasClass("sticky")) $("#ad").addClass("sticky");
			
			if(scrollTop >= contPost){
				$("#ad").css("top", contPost - scrollTop);
			}else{
				$("#ad").css("top", 0);
			}
			
		}else{
			
			if($("#ad").hasClass("sticky")) $("#ad").removeClass("sticky");
		}
		
	});

});
.container {
  width: 100%;
  background-color: #c2c2c2;
}

.block {
  padding: 30px 0;
  width: 100%;
  border: 1px solid #000;
}

.sticky {
  position: fixed;
  top: 0;
}

#stop {
  border:1px solid blue;
  bottom: 0;
  position: absolute;
  width:100%;
  }

#stop{
  display:block;
}

#ad {
	width: 336px;
	height: 250px;
	background-color: #000;
}

#adContainer {
	padding: 50px 0px 300px 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="block"></div>
  <div class="block" ></div>
  <div class="block" ></div>

  <div id="adArea">
	<div id="adContainer">
		<div id="ad"></div>
	</div>
  </div>

  <div class="block"></div>
  <div class="block"></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
  <div class="block" ></div>
</div>

Upvotes: 1

arieljuod
arieljuod

Reputation: 15848

You don't need javascript for that, you can use position: sticky

HTML: (you don't need those extra divs)

<div class="d" id="fixedscroll">
  <img src="https://ormuco.com/wp-content/uploads/2018/08/Large-Rectangle-336-x-280-Google-Ads-1-1-336x250.jpg">
</div>

CSS:

.d {
  background-color: #FFF000;
  width: 336px;
  height: 600px;
  margin: 0px auto;
}

#fixedscroll img {
  position: sticky;
  top: 0px;
}

Check it working https://jsfiddle.net/w9n2ubmg/

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Upvotes: 2

Related Questions