Open sidebar
webdesign plovouci menu
Default (GPT-3.5)
User
Show me a code snippet of a website's sticky header in CSS and JavaScript.
ChatGPT
Certainly! Here's a simple code snippet for creating a sticky header on a website using CSS and JavaScript:
HTML:
html
Copy code
Lepkavá Hlavička
Moje Webové Logo
CSS (styles.css):
css
Copy code
body {
margin: 0;
padding: 0;
}
.sticky-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
z-index: 100;
}
.sticky-header h1 {
margin: 0;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 20px;
}
.content {
/* Přidejte další styly pro obsah stránky zde */
}
JavaScript (script.js):
javascript
Copy code
window.addEventListener('scroll', function () {
const header = document.querySelector('.sticky-header');
if (window.scrollY > 100) {
header.classList.add('sticky');
} else {
header.classList.remove('sticky');
}
});
Tento kódový výňatek vytvoří lepkavou hlavičku na vaší webové stránce, která se zobrazí na vrcholu stránky a zůstane viditelná, když uživatel posouvá stránku dolů.
Send a message
Free Research Preview. ChatGPT may produce inaccurate information about people, places, or facts. ChatGPT September 25 Version
ChatGPT