Fixed navbar

Fixed navigation bar menu to follow page scroll changes

$(function () {
    var nav = $ ('# title')
    var win=$(window)
    var documt=$(document)
    win.scroll(function () {
        if (documt.scrollTop()>45){
            nav.css('position','fixed')
            nav.css('top','0');
        }else{
            nav.css('position','relative')
            nav.removecss('top')
        }
    })
})

 This effect can be achieved with jQuery  

   At 45px from the top he changes

You can also use a plugin in jQuery Postfixed to achieve the effect

Posfixed can make the navigation or header of the web page fixed at the top

$(document).ready(function(){
	$("#title").posfixed({
		distance:0,
		pos:"top",
		type:"while",
		hide:false
	});             
});


Type fixed way, while or always, while is fixed when the scroll bar scrolls to the value of distance;
        always is to always fix the default value while
hide Whether to automatically hide the fixed object default value false
distance from the top or bottom value default value 0

 Responsive design adaptive screen width needs to add meta name=”viewport” content=”width=device-width, initial-scale=1″ /> in the head

Viewport is the default width and height of the web page. Absolute width cannot be used. Width cannot be set to xxxpx. It can only be set to xx% or

width auto ； 

The font cannot be set to xxpx or set to xxem relative value

All block levels need to be set to float

Image adaptive add max-width100% to the div of the image

The core of "Adaptive Web Design" is the Media Query module introduced by CSS3

This means that the screen width is automatically detected and the corresponding CSS file is loaded

    <link rel="stylesheet" type="text/css"
    media="screen and (max-device-width: 400px)"
    href="tinyScreen.css" />

This code means to load the tinyscreen.css file when the screen width is less than 400 pixels

 

    <link rel="stylesheet" type="text/css"
    media="screen and (min-width: 400px) and (max-device-width: 600px)"
    href="smallScreen.css" />

If the screen width is between 400px and 600px, load the smallScreen.css file.