My Programming Tricks

Caveman Blogger

Such web page technique is very popular as of now. When a visitor of your web page scroll down to certain level, a new top panel bar will appear so as to make the page navigation more fluent. This could be inspired by the screen limitation of mobile phones and browsing web pages using a smartphone is a norm these days. Beside the benefit of smoother navigation, the logo of the page can appear more often to increase the logo exposure to the reader.

Here are the codes:

<!DOCTYPE HTML>
<html>
<style type="text/css">

#fixtop {
position: absolute;
top:0px;
}

div > div#fixtop { position: fixed; }
</style>

<script>

var offset;

function checkScrollOffset() {

if (typeof(window.pageYOffset) == 'number') {
 offset = window.pageYOffset;
}
else if (document.documentElement) {
 offset = document.documentElement.scrollTop;
}
else if (document.body) {
 offset = document.body.scrollTop;
}
if (offset > 0) { // you can choose other values for the trigger if you want the fixed div to appear after more scroll offset value
 document.getElementById('fixtop').style.display = 'block'; }
else { document.getElementById('fixtop').style.display = 'none'; }

}

</script>

<body bgcolor="#aabbcc" marginheight=0 marginwidth=0 leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 onscroll="checkScrollOffset()">

<div>

<div id="fixtop" style="border:0px solid #333; width:100%; height:50px; background-color:#ddd; text-align:center; padding:0px; display: none;">
Hello I am here!
</div>

</div>

<table width="95%" align=center><tr><td>
 line 1 line 2 line 3 line 4 line 5 line 6 line 7 line 8 line 9 line 10
 line 11 line 12 line 13 line 14 line 15 line 16 line 17 line 18 line 19 line 20
 line 21 line 22 line 23 line 24 line 25 line 26 line 27 line 28 line 29 line 30
 line 31 line 32 line 33 line 34 line 35 line 36 line 37 line 38 line 39 line 40
 line 41 line 42 line 43 line 44 line 45 line 46 line 47 line 48 line 49 line 50
 line 51 line 52 line 53 line 54 line 55 line 56 line 57 line 58 line 59 line 60
 line 61 line 62 line 63 line 64 line 65 line 66 line 67 line 68 line 69 line 70
</td></tr></table>

</body>
</html>

If you are not sure how to fix a DIV using pure CSS, visit my earlier post here or here as it is the basis of this web trick.

You can also make the fixed DIV semi-transparent by applying the opacity filter in the CSS if you wish.

Note: Try to avoid changing the visibility style in CSS to turn on or off the DIV. Use 'display: none' and 'display: block' instead as the visibility property may cause the fixed DIV to flicker while scrolling in Chrome. The reason for the flicker is unknown.

My Programming Tricks

Labels

Monday, November 23, 2015

Fix a DIV on Top of Page Only After Certain Scroll via Javascript

1 comment: