Welcome to WebmasterWorld Guest from 3.92.28.84

Forum Moderators: open

Message Too Old, No Replies

Sticky div that works on all browsers

     
11:18 am on Sep 10, 2015 (gmt 0)

Junior Member

10+ Year Member Top Contributors Of The Month

joined:July 4, 2007
posts: 193
votes: 0


I've been looking at various sticky div scripts (whereby when you scroll the page, the sticky div sticks to the top of the browser window) and what I find is that in most situations they work well but not on the iPhone and iPad (not sure about Android devices) as what happens is the sticky div doesn't stick until you have stopped scrolling. I think this has been a common issue.

However I was looking at the Apple website last night which now appears to be fully responsive and they have got a sticky div on there that works perfectly. I've had a look at the javascript and it's incredibly complex (for me anyway). The page on the Apple site is Apple > iPad > Compare then when you scroll down the iPad models stick to the top of the browser.

Just wondering if anybody can decipher this or knows of any scripts that work on most browsers.

Here's the code I'm currently using.


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/* -------------------- ## CSS Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }

/* -------------------- ## CSS Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */

.cf:before,
.cf:after {
content: " ";
display: table;
}

.cf:after {
clear: both;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* -------------------- ## Doc Setup */

.table {
display: table;
width: 100%;
height: 100%;
text-align: center;
}

.cell {
display: table-cell;
vertical-align: middle;
}

.contentarea {
width: 100%;
height: 100%;
position: absolute;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 56px;
color: #fff;
}

body,html {
width: 100%;
height: 100%;
}

#header {
display: none;
}

#nav,
#single-product-bar {
height: 75px;
z-index: 1;
}

#content {
height: 3000px;
background: yellow;
}

#nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: #f5f5f5;
text-align: center;
line-height: 75px;
}

#nav.is-fixed {
position: fixed;
top: 0;
}

#content.is-fixed {
}

#fullpage {
height: 100%;
background: #ccc;
position: relative;
}

.animateme {
background: red;
width: 200px;
height: 200px;
}
</style>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>
<body class="">
<div id="fullpage">
<div class="contentarea">
<div class="table">
<div class="cell">
Content here.
</div>
</div>
</div>
<div id="header">header</div>
<div id="nav" class="">nav bar</div>
</div>
<div id="content" class="">
<div
class="animateme"
>
hello
</div>
</div>

<script type="text/javascript">
$(document).ready(function () {
var bottom = $('#nav').offset().top;
$(window).scroll(function(){
if ($(this).scrollTop() > bottom){
$('#nav').addClass('is-fixed');
$('#content').addClass('is-fixed');
}
else{
$('#nav').removeClass('is-fixed');
$('#content').removeClass('is-fixed');
}
});
});
</script>

</body>
</html>