How to Create Sticky Header Using HTML, CSS, Bootstrap in Hindi

 How to Create Sticky Header Using HTML, CSS, Bootstrap in Hindi - इस Article में Sticky header को Create करना सीखेंगे। यहाँ पे हम आपको एक अच्छा header Design करके दिखाएंगे। जिसे बनाना आप सीख सकते है इसके अतिरिक्त आप इसे अपने Project में भी Implement कर सकते है।

How to Create Sticky Header Using HTML, CSS, Bootstrap in Hindi


How to Create Sticky Header Using HTML, CSS, Bootstrap in Hindi

Sticky header design करने के लिए हमने HTML CSS Bootstrap JQuery का Use किया है। सबसे पहले हम HTML का Code लिखते है। 


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sticky Header</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel='stylesheet' id='googleFonts-css' href='https://fonts.googleapis.com/css2?family=Laila%3Awght%40500&#038;display=swap&#038;ver=5.7.6' type='text/css' media='all' />
</head>
<body>
<div id="header">
    <!-- container -->

        <!-- row -->
        <div class="row">
            <!-- LOGO -->
            <div class="col-md-4">
                <a href="index.php" id="logo"><img src="images/logo.png">
</a>


            </div>
            <!-- /LOGO -->
             <div class="col-md-8">
                <div id="menu-bar">
                <ul class='menu'>
                    <li><a href='category.php'>Business</a></li>
                    <li><a href='category.php'>Entertainment</a></li>
                    <li><a href='category.php'>Sports</a></li>
                    <li><a href='category.php'>Politics</a></li>
                    <li><a href='category.php'>Sign In</a></li>
                     <li><a class="btn-get" href='category.php'>Get Started</a></li>
                </ul>
        </div>
</div>
        </div>
    </div>
    <div class="bottom-div">
    	
    </div>
</body>
</html>

1. ये हमारा HTML बन चुका है। इसको थोड़ा समझ लेते है। सबसे पहले इसमें Title हमने Sticky header दिया हुआ है। 
2. फिर इसमें हमने Bootstrap की File को Include किया हुआ है। 
3. Google Font family का use किया है। इसलिए उसका भी File add किया गया है। 
4. अब ये हमारा Header Start हो रहा है। सबसे पहले हमने header id को <div id="header"> Assign किया हुआ है। 
5. फिर एक row को Create किया है। जिसमे हम दो column Create करेंगे। एक logo के लिए और दूसरा Menu के लिए। 
6. <div class="col-md-4"> ये हमने पहला Column Create किया है। जिसमे logo add किया हुआ है। 
7. <div class="col-md-8"> ये दूसरा Column Create किया है जिसमे हम menu links Create करेंगे। 
8. ul li में links को Create किया गया है। और links target डेमो रखा है। 

अब हम इसे Design करने के लिए CSS का Use करेंगे। 


/* Header Styling */
#header{
       text-align: center;
    padding: 15px;
    background-color: transparent;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    width: 100%;
    border-bottom: 0.5px solid;
        border-color: #fff3f3;
        background: linear-gradient(145deg, #f65d5d 0%, #fdb07d 100%);
}

#logo{
    display: inline-block;
    width: 65%;
}

#logo img{
        width: 80%;
    margin-top: -6px;
}



/* Menubar Styling */
.mobile-menu{
   display: none;
}
@media only screen and (max-width: 600px) {
    .mobile-menu{
   display: block;
}
}


#menu-bar .menu > li{
    display: inline-block;
}

.menu > li > a{
    padding: 10px 20px;
    display: block;
    text-transform: capitalize;
    color: #fff;
    font-size: 16px;
    font-weight:500;
    transition:all 0.5s ease 0s;
        font-family: 'Laila', serif;
}	
.sticky {
    position: fixed;
   background: black !important;
    top: 0;
    width: 100%;
    border: none !important;
    
    }
.bottom-div {

margin-bottom: 1000px;
}
	</style>


अब हम Jquery का Use करेंगे। जो इसको Sticky बनाएगा। 

    <script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("header");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>

1. window.onscroll = function() {myFunction()}; ये कहता है की जब page scroll हो तब एक Function शुरू होना चाहिए myfunction नाम का। 
2.var header = document.getElementById("header");  html header को एक header variable में store कर लिया है।  जिसे हम javascript के document.getElementById get कर रहे है। 
3. var sticky = header.offsetTop; ये Distance को Return कर रहा है। और उसे sticky variable में store करा रहे है। 
4. function myFunction() { अब जैसे ही Window Scroll होगा हमारा यहाँ से Function शुरू होगा। 
5. if (window.pageYOffset > sticky) { ये कह रहा है अगर header की दूरी Scroll से दूर है तो 
6. header.classList.add("sticky"); एक नयी class header में add कर दो sticky 
7. header.classList.remove("sticky"); वरना header से sticky class remove कर दो। 


अब हमारा पूरा Sticky header बन चुका है। अब नीचे मै आपको full Code Share करता हूँ। सभी को एक में Embedded करके।

Full Code of Sticky Header in Hindi 

  
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Sticky Header</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel='stylesheet' id='googleFonts-css' href='https://fonts.googleapis.com/css2?family=Laila%3Awght%40500&#038;display=swap&#038;ver=5.7.6' type='text/css' media='all' />
	<style type="text/css">
		
	/* Header Styling */
#header{
       text-align: center;
    padding: 15px;
    background-color: transparent;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 997;
    width: 100%;
    border-bottom: 0.5px solid;
        border-color: #fff3f3;
        background: linear-gradient(145deg, #f65d5d 0%, #fdb07d 100%);
}

#logo{
    display: inline-block;
    width: 65%;
}

#logo img{
        width: 80%;
    margin-top: -6px;
}



/* Menubar Styling */
.mobile-menu{
   display: none;
}
@media only screen and (max-width: 600px) {
    .mobile-menu{
   display: block;
}
}


#menu-bar .menu > li{
    display: inline-block;
}

.menu > li > a{
    padding: 10px 20px;
    display: block;
    text-transform: capitalize;
    color: #fff;
    font-size: 16px;
    font-weight:500;
    transition:all 0.5s ease 0s;
        font-family: 'Laila', serif;
}	
.sticky {
    position: fixed;
   background: black !important;
    top: 0;
    width: 100%;
    border: none !important;
    
    }
.bottom-div {

margin-bottom: 1000px;
}
	</style>

</head>
<body>
<div id="header">
    <!-- container -->

        <!-- row -->
        <div class="row">
            <!-- LOGO -->
            <div class="col-md-4">
                <a href="index.php" id="logo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwvtlJjCiWkluH41ffootIcs6qujH_F8hHyhfcSjPliFYsG6GWOgzWgDJs9Aig7Ex_LqtgEv9XcIj4Bb8FwKPIwwXGKXi7W1lgHVSUOQ_-Mt_a3mRTX5OJp0bK1Ql9J7p8nd_yMA2y1btKlJ7Nhmef1FwhG00BKJUEhalTrWQLe7PLMF4z_z1Cu4Gi/s1600/cooltext411067071629284.png" width="100" height="50">
</a>


            </div>
            <!-- /LOGO -->
             <div class="col-md-8">
                <div id="menu-bar">
                <ul class='menu'>
                    <li><a href='category.php'>Business</a></li>
                    <li><a href='category.php'>Entertainment</a></li>
                    <li><a href='category.php'>Sports</a></li>
                    <li><a href='category.php'>Politics</a></li>
                    <li><a href='category.php'>Sign In</a></li>
                     <li><a class="btn-get" href='category.php'>Get Started</a></li>
                </ul>
        </div>
</div>
        </div>
    </div>
    <div class="bottom-div">
    	
    </div>
     <script>
window.onscroll = function() {myFunction()};

var header = document.getElementById("header");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}
</script>  
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Mazda Pickups Playing It Up In The Us Market

Headquartered and based in Hiroshima, Japan, the Mazda Motor Corporation, or more commonly known as Mazda, is one of the leading manufacturers and producers of vehicles. It was able to enter the United States market for automobiles in the year 1970. By entering the US market, an automobile company should have a number of vehicles in tow so as to introduce to the public. What Mazda brought was one single car which was the Mazda RX 2. However, come the following year, 1971, Mazda now had five cars tagging along with it. These five cars were comprised of the compact cars that were based on the Mazda Familia – the Mazda 1200 and the Mazda R100, the larger vehicles based this time on the Mazda Capella – the Mazda 616 and the Mazda RX 2, and lastly, the larger Mazda 1800. And after that, the Mazda vehicle line for the US auto market welcomed in the Mazda RX 3 and the Mazda B1600. Also joining the family were the Mazda 808 as well as the Mazda 618. Quickly rising in popularity and prominence,...
Read more

Types of Computer Based on Size in Hindi (आकर के आधार पर Computer के प्रकार )

Image
 इस Article में Types of Computer Based on Size in Hindi (आकर के आधार पर Computer के प्रकार ) पढ़ेंगे और जानेगे।  Types of Computer Based on Size जब से Computer का अविष्कार हुआ है। तब से लेकर आज तक Computer के आकार, तेजी, Designs में परिवर्तन होता रहा है। इसी के आधार पर Computers को तीन भागो में विभाजित किया गया है। Based on Size Based on Purpose Based on Types ये Computer के तीन आधार है। जिनमे Computers को विभाजित किया गया है। इस Article में हम Types of Computer Based on Size के बारे में जानेगे। बाकि के बाद में जानेगे। आकार के आधार पर Computers को चार भागो में बनता है। गया जिनके बारे में नीचे पूरी तरह से जानकारी दी गयी है। Mini Computers Micro Computers Mainframe Computers Super Computers 1. Mini Computer Mini Computer Micro Computer और Mainframe Computer के बीच का Computer है | ये एक Small Type का Computer है | इस Computer का Size Small होता है| लेकिन इसमें Features सभी Large Computers के ही होते है | Mini Computer Multi User Operating System को Support करता है। जिसकी वजह स...
Read more

Finding A College Scholarship For A Single Mother

Women dream of having a happy and fulfilled family life. But sometimes reality can really hurt, and the fairy tale world ends with a snap of a finger. And very soon, you’ll find yourself raising your kids alone without the help of your husband. Supporting a family with kids is tough, especially if you’re a single mom. And the best way to be able to give your kids a decent life is to finish college, and land a good job. Being a single mother can be very hard. You would have to do everything yourself; work hard, attend to your kids needs, and attend college classes. Oftentimes, you will have difficulty in handling your finances. And attending college requires a certain sum of money. Here is where a college scholarship will come in handy. Different universities offer college scholarships for single moms; all you have to do is to find the right university which could help you in that aspect. The internet is also a good source of universities and institutions which offer such scholarships. ...
Read more