This is mainly a blog for android. But Now I am writing here some other things as well. I am using this as my virtual notebook. If you want, you can follow this note.
If your website has a fixed navigation bar, or sidebar or other div, it looks better. If you can't understand what I am talking about, then you can Visit this (visit from your pc).There you'll see a navigation bar at the top which remains fix while scrolling. To do this we have to follow a little bit javascript code. I am telling the process in step by step.
Step 1. : First make your html & css code normally.
Step 2. : We have to use Jquery here. For this, use the following code in the HEAD tag of html code.
"<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>"
Step 3. : Use the following javascript code at the top of the BODY section (<body> ... code ... </body)
<script type="text/javascript">
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
An id "#sticker" & a class "stick" is used here. I am not explaining javascript here.Here the id "#sticker"
is the id of your desired div which you want to make fix while scrolling.
Step 4. : Simply add the id "#sticker" to your desired div
Step 5. : Add the following code in your css file
.stick {
position:fixed;
top:0px;
}
That's all! Now save the files and see.
Note: The link I have used above is my practice site.Lots of lacking there. Visit the site from your desktop or
laptop. Otherwise you will unexpected result. You may see a error like this "This site may be fake!".
If your website has a fixed navigation bar, or sidebar or other div, it looks better. If you can't understand what I am talking about, then you can Visit this (visit from your pc).There you'll see a navigation bar at the top which remains fix while scrolling. To do this we have to follow a little bit javascript code. I am telling the process in step by step.
Step 1. : First make your html & css code normally.
Step 2. : We have to use Jquery here. For this, use the following code in the HEAD tag of html code.
"<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>"
Step 3. : Use the following javascript code at the top of the BODY section (<body> ... code ... </body)
<script type="text/javascript">
$(document).ready(function() {
var s = $("#sticker");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
</script>
An id "#sticker" & a class "stick" is used here. I am not explaining javascript here.Here the id "#sticker"
is the id of your desired div which you want to make fix while scrolling.
Step 4. : Simply add the id "#sticker" to your desired div
Step 5. : Add the following code in your css file
.stick {
position:fixed;
top:0px;
}
That's all! Now save the files and see.
Note: The link I have used above is my practice site.Lots of lacking there. Visit the site from your desktop or
laptop. Otherwise you will unexpected result. You may see a error like this "This site may be fake!".
0 comments:
Post a Comment