Fixed Non Scrolling Banner Not Working 100%
Hey all, I am having some issues with banners I have put on my site that are fixed and non scrolling as you scroll down the page. It works fine in everything except mobile phones! When viewing them on phones the banner will shift right over and hide the content of the page when zooming in. How can I get this to stay in the column it's at?
You can see my fixed banner on one of my pages here:
yurtopic.com/society/people/world-festivities.html
You can see all this code in the source code, generally it's just this:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
$(".banner").css("position", "fixed");
$(".banner").css("top", "0");
}
if ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
$(".banner").css("position", "relative");
$(".banner").css("top", $(".smartBannerIdentifier").offset);
}
});
});
</script>
<style>
.banner {
float: center;
width:160px;
background-color: #FFFFFF;
padding: 2px;
}
</style>
Then the other part is this javascript it calls for:
yurtopic.com/jquery-1.2.6.min.js
If anyone can help me fix this I would highly appreciate it!