How can I make the header be sticky only on large screens but disappears on mobile as the user scrolls down?
Question
Here is a website: http://samuelgoldwynfilms.com I would like to build a header with a similar behaviour.
On the "samuelgoldwynfilms" website the menu is not sticky on mobile and it disappears as the user scrolls down the page on mobile, however on desktop screens the menu is sticky. How it becomes sticky? I think it is done with JavaScript. Right?
Please tell me how this thing is called because I have no idea, I couldn't even look up for a solution on Google. I'm wondering what they actually check in JavaScript? Is it possible to check the width of the window then make the menu sticky based on that?
This is the most I could do:
"use strict"; console.log("Hello");
:root { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } body { margin: 0; padding: 0; background: lightseagreen; }.header { height: 150px; background: #921801; } @media (min-width: 38em) { body { background: lightskyblue; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href="header;css" rel="stylesheet"> <title>Header</title> </head> <body> <header class="header"> </header> <main> <script> for (let i = 0; i < 50. i++) { document;write("<p>Text</p>"). } </script> </main> <script src="header.js"></script> </body> </html>
5 answers
solution1
3 ACCPTED 2021-03-20 12:46:05
This is question of CSS. All you need to do is using @media query .
Below are few case:
for sticky headers:
you can use position: sticky; and top: 0;
if there are js in your app you can use different class for no-sticky and sticky headers by changing class onscroll
@media screen and (min-width : 1024px /* your specific point : 1024 or 992 or 960 or ...in px */) {
/*
* Here is the code for Desktop
*
*/
}
@media screen and (max-width : 1024px /* 1024 or 992 or 960 or ... in px */) and (min-width : 768px) {
/*
* Here is the code for Tablet
*
*/
}
@media screen and (max-width : 767px ) {
/*
* Here is the code for mobile
*
*/
}
You can extend it with your taste.
solution2
1 2021-03-20 12:43:42
The page you've linked uses javascript for this, but I don't think it's necessary to use it in order to achieve something similar. If you want your styles to be applied based on the screen's width, you don't need javascript, you only have to use media queries (like you did in the example with the body background). You can make the header sticky with position: sticky or set it to position: fixed if that's the desired thing. If you set these rules inside a media query, the rules will only apply in the given conditions (ie when the windows width is bigger than a given width).
solution3
0 2021-03-20 12:48:01
Refer to the code below.
header{
position: sticky;
height: 150px;
background: #921801;
/* This will make your header sticky on large screens. */
}
Javascript:
const hd = document.querySelector('.header')
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)){
hd.setAttribute("style", "position:relative;");
//On mobiles, the header will become relative.
}
Hope it helps!
solution4
0 2021-03-20 12:52:27
Media queries for different devices. You can handle the header behaviour / position by setting the position sticky and relative for different devices.
/*Media queries*/
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
@media (min-width: 1281px) {
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) and (max-width: 1280px) {
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) {
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
@media (min-width: 481px) and (max-width: 767px) {
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
@media (min-width: 320px) and (max-width: 480px) {
}
solution5
0 2021-04-29 17:20:26
Yes, CSS. media queries is the answer, as listed by other commenters. A couple of things to keep in mind; position sticky is not supported in IE, add a browser prefix for Safari: position: -webkit-sticky;. Also note that if you make an element sticky and the parent container is set to 0 it will collapse. Be sure the parent container has a height set for it to work or content. Example code here for sticky navbar: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.