cian1500ww
New Member
I have a ad banner in this kind of structured html\[code\]<div class="banner"></div><div class="container"> <div class="content"></div> <div class="side-ads"> <div class="banner1" style="position: relative;"> <img src="http://stackoverflow.com/questions/12745906/images/skyscraper.jpg" alt="" class="skyscraper" /> </div> <div class="smartBannerIdentifier"></div> </div></div><div class="footer"></div>\[/code\]Now my problem is I want floating banner. When user scrolls the page when the container div touches the top part of browser the ad-banner will remain at top touched and when the footer div comes into visible part the bottom of ad-banner should touch to top of footer div.This is the \[code\]jquery\[/code\] I have tried. It is working perfectly for the first part means for the top touching of browser. How can I solve the second problem of footer div\[code\]<script type="text/javascript">$(document).ready(function(){ $(window).scroll(function(){ //console.log($(".smartBannerIdentifier").offset().top,$(window).scrollTop()) if ($(window).scrollTop() > $(".smartBannerIdentifier").offset().top){ $(".banner1").css("position", "fixed"); $(".banner1").css("top", "0"); } //if ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){ if ($(window).scrollTop() == 0){ $(".banner1").css("position", "relative"); //$(".banner1").css("top", $(".smartBannerIdentifier").offset); $(".banner1").css("top", "224"); } console.log("footer "+$(window).scrollTop()); });});</script>\[/code\]