I am trying to program a little script which should change the active tab when the offset of the current section is <= 0. I am running a function on every scroll event which should get the distance of every section in the body and calculate the current distance - if the distance is 0, it should be updated and the appropriate element should be set active.
I searched the web and found this solution - however the distance does not change and stays the same.
function scrollPage() {
var sections = document.getElementsByTagName('section');
for (var i = 0; i < sections.length; i++) {
console.log(sections[i].offsetTop - document.body.scrollTop);
}
}
html {
width: 100%;
}
body {
height: 100%;
margin: 0;
}
.body {
position: absolute;
height: auto;
width: auto;
padding-top: 32px;
padding-bottom: 8px;
margin: 48px 0 72px 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
}
<html>
<body>
<div class="body" onscroll="scrollPage()">
<section id="section1">
<h1>Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section2">
<h1>Other text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
</div>
</body>
</html>
I know that there are ways to do this with JQuery - however I would like to avoid using JQuery so I would be happy if somebody can point out my error.
Best regards and thank you in advance,
Related
I am a neewbie in Javascript: I made a mute/unmute button in a fixed position which mute a video in autoplay (no controls) while scrolling the page.
Considered that when you enter the site or refresh the page my video starts only when you scroll till that specific section, is there a way to let the mute/unmute button appear only in 'video section' but then, once is appeared, to let it remain also in the previous sections? (from the top till the bottom of the page).
I can not find a solution rather than let the button appear only from that section, but I want it to remain also in the previous sections.
Here how it looks now:
var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");
//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"
//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"
function myFunction() {
// toggle the muted property of the video element
video.muted = !video.muted;
// if the video is muted, set the img.src to unmuteImg
// otherwise, set it to the muteImg
if (video.muted) {
img.src = unmuteImg;
} else {
img.src = muteImg;
}
}
.video-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px auto 80px;
}
.video-description , .sct{
text-align: center;
max-width: 66%;
margin: 0 auto 24px;
font: inherit;
letter-spacing: 4px;
}
#myVideo {
border-radius: 5px;
max-width: 46%;
object-fit: cover;
margin-bottom: 20px;
}
#myImg {
top: 10%;
right: 3%;
position: fixed;
z-index: 50;
cursor: pointer;
padding: 10px 20px;
background: #D3D3D3;
color: #000;
border-radius: 5px;
display: inline-block;
}
<section class="sct 1">
SECTION 1 <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="sct 2">
SECTION 2<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="video-container">
<div class="video-description">
VIDEO SECTION <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<video id="myVideo" autoplay loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<div class="content">
<img id="myImg" onclick="myFunction()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
<section class="sct 4">
SECTION 4<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
If I understand correctly this is what you're looking for:
var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");
//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"
//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"
function myFunction() {
// toggle the muted property of the video element
video.muted = !video.muted;
// if the video is muted, set the img.src to unmuteImg
// otherwise, set it to the muteImg
if (video.muted) {
img.src = unmuteImg;
} else {
img.src = muteImg;
}
}
const observer = new IntersectionObserver(
(entries) => {
if (!entries[0].isIntersecting) {
img.style.display = "none";
} else {
img.style.display = "block";
observer.unobserve(video);
}
},
{ threshold: [0] });
observer.observe(video);
section:first-of-type {
margin-top: 400px;
}
.video-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px auto 80px;
}
.video-description , .sct{
text-align: center;
max-width: 66%;
margin: 0 auto 24px;
font: inherit;
letter-spacing: 4px;
}
#myVideo {
border-radius: 5px;
max-width: 46%;
object-fit: cover;
margin-bottom: 20px;
}
#myImg {
top: 10%;
right: 3%;
position: fixed;
z-index: 50;
cursor: pointer;
padding: 10px 20px;
background: #D3D3D3;
color: #000;
border-radius: 5px;
display: inline-block;
}
<section class="sct 1">
SECTION 1 <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="sct 2">
SECTION 2<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="video-container">
<div class="video-description">
VIDEO SECTION <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<video id="myVideo" autoplay loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<div class="content">
<img id="myImg" onclick="myFunction()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
</div>
<section class="sct 4">
SECTION 4<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
Use an IntersectionObserver
var video = document.getElementById("myVideo");
var img = document.getElementById("myImg");
const videoContainer = document.querySelector('.video-description')
//declare unmute image variable
var unmuteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/Sound-512.png"
//declare mute image variable
var muteImg = "https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png"
const observer = new IntersectionObserver(entries => {
for (const { isIntersecting } of entries) {
if (isIntersecting) {
img.hidden = false
observer.disconnect()
}
}
}, { threshold: 0.1 });
observer.observe(videoContainer)
function myFunction() {
// toggle the muted property of the video element
video.muted = !video.muted;
// if the video is muted, set the img.src to unmuteImg
// otherwise, set it to the muteImg
if (video.muted) {
img.src = unmuteImg;
} else {
img.src = muteImg;
}
}
.video-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 10px auto 80px;
}
.video-description , .sct{
text-align: center;
max-width: 66%;
margin: 0 auto 24px;
font: inherit;
letter-spacing: 4px;
}
#myVideo {
border-radius: 5px;
max-width: 46%;
object-fit: cover;
margin-bottom: 20px;
}
.button {
top: 10%;
right: 3%;
position: fixed;
z-index: 50;
cursor: pointer;
padding: 10px 20px;
background: #D3D3D3;
color: #000;
border-radius: 5px;
display: inline-block;
}
[hidden] {
display: none;
}
<section class="sct 1">
SECTION 1 <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="sct 2">
SECTION 2<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<section class="video-container">
<div class="video-description">
VIDEO SECTION <br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<video id="myVideo" autoplay loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<div class="content">
<img id="myImg" class="button" onclick="myFunction()" hidden src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
<section class="sct 4">
SECTION 4<br><hr>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
Looks like you are missing some closing tags for one. You might review that and make sure all the divs and sections are closed.
Also, I got the code duplicated on my screen and it seems to functionally work. If I understand the issue, you literally want to move where the img is.
This will be a CSS change. You want to position the img relative to the wrapper, not the whole page, so you have to change tell it.
Something similar like this:
<div class="video-wrapper">
<video id="myVideo" autoplay loop>
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>
<img id="myImg" onclick="toggleMute()" src="https://cdn2.iconfinder.com/data/icons/squircle-ui/32/No_sound-512.png" width="20" height="20">
</div>
Set the CSS as something like this. The "position: relative;" is the key, any child in this div will now be relative to this element
.video-wrapper {
text-align: center;
position: relative;
}
// change from fixed to absolute. and then it will be relative to the wrapper
#myImg {
position: absolute;
}
This will get the img close to where you want it - the challenge will be getting the wrapper to hug the video element or the video element to expand to fit the wrapper
When an (x) amount of images are located next to (x) different paragraphs, how do I change the image when to a different image entirely when hovering over different paragraphs, as seen on dart.dev by google?
Depending on exactly what the use case is, you can do this without Javascript.
In this snippet the paragraphs and the space for the image are within the same container and then when hovering over a paragraph its associated image is shown as a background image to its before pseudo element which is positioned at the (communal) image position.
body {
overflow-y: hidden;
}
.container {
position: relative;
width: 100%;
}
.container .image, .container p:hover::before {
width: 45%;
height: 100%;
}
.container .image {
display: inline-block;
}
.container div.pwrapper {
width: 45%;
height: 100vh;
display: inline-block;
overflow-y: auto;
}
.container p:hover::before {
position: absolute;
top: 0;
left: 0;
content: '';
background-image: var(--bg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat no-repeat;
}
.container p:nth-child(1) {
--bg: url(https://picsum.photos/id/1015/1024/384.jpg);
}
.container p:nth-child(2) {
--bg: url(https://picsum.photos/id/1016/1024/384.jpg);
}
.container p:nth-child(3):hover {
--bg: url(https://picsum.photos/id/1018/1024/384.jpg);
}
.container p:nth-child(4) {
--bg: url(https://picsum.photos/id/1019/1024/384.jpg);
}
.container p:nth-child(5) {
--bg: url(https://picsum.photos/id/1024/1024/384.jpg);
}
<div class="container">
<div class="image"></div>
<div class="pwrapper">
<p>First paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Second paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Third paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p>Fourth paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Fifth paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
This is indeed done using javascript as evidenced by it not working when you turn off javascript. What you'll want to do is have an img tag and use the javascript mouseover event. You could do something like this:
let img = document.getElementById("img-1");
let link1 = document.getElementById("link-1");
link1.addEventListener('mouseover', () => img.src = 'img1.png');
let link2 = document.getElementById("link-2");
link2.addEventListener('mouseover', () => img.src = 'img2.png');
... (Might want to use a loop)
I need to get the max number of pixel that scrolled in the page.
I've tried window.pageXOffset but it return the atual scrolled , I need the full size always
Due to this link
EDIT: Congratulation you have solve it. I have include more example for you.
let scrollLength = document.documentElement.scrollWidth-document.documentElement.clientWidth
myFunction();
window.addEventListener('scroll', myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Pos: "+window.pageXOffset+"/"+scrollLength;
}
body{
margin: 0;
width: 1000px;
color: lightgray;
}
#demo{
color: black;
position:fixed;
top:0;
right:0;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a id="demo">xxx</a>
I just solve this using
document.documentElement.scrollWidth - document.documentElement.clientWidth;
Im trying to make a Webpage with a banner so that when you scroll the content comes from the bottom and keeps sticking right under the upper half of the banner.
I immediately came up with the easy and ugly idea, that the content-box would have the size of the screen, a big margin-top and overflow-y: scrolling, but as I said...it would be the ugly way.
Thus my main problem is to achieve this and still have one single scroll-bar. I think the header has to be position: fixed...has anyone an css / more mobile friendly idea?
EDIT:
As requested a JSFiddle to play with: http://jsfiddle.net/r2gbyjcs/
Before we begin
Note that there is no such thing as "fancy" or "unfancy" in coding. In fact, if I were to define "fancy", I'd describe it as "unnecessary." Because if all you want is to achieve the same result but put in a rube goldberg amount of effort, that's just wasting your time. Your goal is to create the fastest and smoothest implementation, not put fancy code behind the veil.
Solution
The solution is to divide the header into 2 divs: Top and Bottom. Make them have same background to be indistinguishable, but make the top have z-index: 0 while the bottom has z-index: -1. Then, split the height between the top and bottom and then adjust the margin-top of the content.
HTML:
<header>
<div id="top">Hotel</div>
<div id="bottom">Bottom half</div>
</header>
<div id="content">
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h1>Best Shawarma in the world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
CSS:
body {
margin: 0px;
}
header #top{
height: 100px;
background-color: #fb3f26;
position: fixed;
top: 0px;
left:0px;
right: 0px;
}
#content {
background-color: #e0ecf3;
padding: 20px;
margin-top: 200px;
}
header #bottom{
height: 200px;
background-color: #fb3f26;
position: fixed;
z-index: -1;
top: 0px;
left:0px;
right: 0px;
}
JSFiddle Demonstration
You could make the header position:absolute so it is fixed in place and taken out of the layout flow. Then add padding-top to the content box to compensate for the height of the header.
I would suggest something like this, but it's not the fanciest way:
HTML
<header id="header1">
<div>Hotel</div>
</header>
<header id="header2">
</header>
<div id="content">
...
CSS
#header1 {
height: 25px;
background-color: #fb3f26;
position: fixed;
top: 0px;
left:0px;
right: 0px;
z-index: 1;
}
#header2 {
height: 300px;
background-color: #fb3f26;
position: fixed;
top: 0px;
left:0px;
right: 0px;
z-index: -1;
min-height: 25px;
}
I think an easy way would be to just use position:fixed for the header/banner. Then edit the z-index so the banner is behind the content box and the header is above the content box. You can use margin-top to offset the height of the header/banner.
http://jsfiddle.net/haydensmack/r2gbyjcs/6/
This is my css
<style type="text/css" media="screen">
body {
margin: 0;
}
#wrap1{
width:600px;
margin:0 auto;
overflow:hidden;
-moz-box-shadow: 0 0 2px 2px #ccc;
-webkit-box-shadow: 0 0 2px 2px #ccc;
box-shadow: 0 0 2px 2px #ccc;
}
#body1{
width: 8000px;
}
.panel {
width: 600px;
float: left;
left:0px;
top:0px;
margin-top: 45px;
background: #eee;
}
#banner {
position: fixed;
}
#banner ul {
line-height: 45px;
margin: 0 30px;
padding: 0;
}
#banner ul li {
display: inline;
margin-right: 30px;
}
</style>
This is what I have in my body
<div id="wrap1">
<div id="body1">
<div id="banner">
<ul>
<li>
Home
</li>
<li>
Newsletter
</li>
<li>
Directions & Opening Hours
</li>
<li>
Contact us
</li>
</ul>
</div>
<div id="home" class="panel">
<h2>
Home
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="newsletter" class="panel">
<h2>
Newsletter
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="directions" class="panel">
<h2>
Directions
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="contact" class="panel">
<h2>
Contact
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
and this is the javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#banner a").bind("click",function(event){
event.preventDefault();
var target = $($(this).attr("href"));
$("html, #wrap1").stop().animate({
scrollLeft: $(target).offset().left,
scrollTop: $(target).offset().top
}, 1200);
});
});
</script>
I want to have something like this. So, when I clicked the navigation contact, the page inside the wrap1 will scroll smoothly to the where the anchor #contact is
However, what i get right now is the smooth scroll is working fine, however, it doesn't seem stop at where it is supposed to stop. For instance, when I click Newsletter link, the scroll will stop in the half part of Newsletter. So when click Newsletter link, it will show me half part of Newsletter and half part of Directions.
Please jQuery guru out there help me fix this issue. This has been bugging me for days.
Thanks and sorry for the lack of jQuery knowledge I have.
*EDITED:
This is my page looks like right now. Please help
http://testhscroll.tumblr.com/
Your problem is that offset() returns values relative to the document, whereas scrollLeft will be relative to the parent.
You need to adjust by the position of the parent (div#banner or the UL).