Static header scrolling body with long header
here's a little demonstration of what I did so far:
http://jsfiddle.net/pawLs132/3/
fictive "code" required to post this question
Basically I want a static header which is longer than the viewpoint but I want the text to be fit inside the set width so that when you scroll to the right the other part of the text will be displayed. (in this example meaning that I want the part "This should always be visible and when you s" to be initially visible and you have to scroll to the right to see the other part of the header)
I would also like it so that when you scroll the body there's no part of the body text visible inside the header container like it is now. Thanks in advance.
css scroll
asked Nov 21 '18 at 19:01
RobertRobert
745
add a comment |
here's a little demonstration of what I did so far:
http://jsfiddle.net/pawLs132/3/
fictive "code" required to post this question
Basically I want a static header which is longer than the viewpoint but I want the text to be fit inside the set width so that when you scroll to the right the other part of the text will be displayed. (in this example meaning that I want the part "This should always be visible and when you s" to be initially visible and you have to scroll to the right to see the other part of the header)
I would also like it so that when you scroll the body there's no part of the body text visible inside the header container like it is now. Thanks in advance.
css scroll
asked Nov 21 '18 at 19:01
RobertRobert
745
You will not be able to accomplish this with just CSS. You will need to use JavaScript.
– Peter
Nov 21 '18 at 19:12
add a comment |
here's a little demonstration of what I did so far:
http://jsfiddle.net/pawLs132/3/
fictive "code" required to post this question
Basically I want a static header which is longer than the viewpoint but I want the text to be fit inside the set width so that when you scroll to the right the other part of the text will be displayed. (in this example meaning that I want the part "This should always be visible and when you s" to be initially visible and you have to scroll to the right to see the other part of the header)
I would also like it so that when you scroll the body there's no part of the body text visible inside the header container like it is now. Thanks in advance.
css scroll
asked Nov 21 '18 at 19:01
RobertRobert
745
here's a little demonstration of what I did so far:
http://jsfiddle.net/pawLs132/3/
fictive "code" required to post this question
Basically I want a static header which is longer than the viewpoint but I want the text to be fit inside the set width so that when you scroll to the right the other part of the text will be displayed. (in this example meaning that I want the part "This should always be visible and when you s" to be initially visible and you have to scroll to the right to see the other part of the header)
I would also like it so that when you scroll the body there's no part of the body text visible inside the header container like it is now. Thanks in advance.
css scroll
css scroll
asked Nov 21 '18 at 19:01
RobertRobert
745
asked Nov 21 '18 at 19:01
RobertRobert
745
asked Nov 21 '18 at 19:01
RobertRobert
745
asked Nov 21 '18 at 19:01
RobertRobert
745
asked Nov 21 '18 at 19:01
RobertRobert
745
745
You will not be able to accomplish this with just CSS. You will need to use JavaScript.
– Peter
Nov 21 '18 at 19:12
add a comment |
You will not be able to accomplish this with just CSS. You will need to use JavaScript.
– Peter
Nov 21 '18 at 19:12
You will not be able to accomplish this with just CSS. You will need to use JavaScript.
– Peter
Nov 21 '18 at 19:12
You will not be able to accomplish this with just CSS. You will need to use JavaScript.
– Peter
Nov 21 '18 at 19:12
add a comment |
1 Answer
1
active
oldest
votes
Use fixed width with position:fixed on header
.on-top {
position: sticky;
top: 0;
overflow-x: scroll;
white-space: nowrap;
width: 305px;
background: white;
}
Make sure the body has margin top to prevent overlap
.inner {
margin-top: 3em;
}
answered Nov 21 '18 at 19:33
jeanpaulxiaojeanpaulxiao
1635
But now the header and the body have a different scroll bar, I would like for them to share the same one.
– Robert
Nov 21 '18 at 20:09
Try it again, I've updated it.position:stickyinstead offixed.
– jeanpaulxiao
Nov 21 '18 at 21:04
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418922%2fstatic-header-scrolling-body-with-long-header%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Use fixed width with position:fixed on header
.on-top {
position: sticky;
top: 0;
overflow-x: scroll;
white-space: nowrap;
width: 305px;
background: white;
}
Make sure the body has margin top to prevent overlap
.inner {
margin-top: 3em;
}
answered Nov 21 '18 at 19:33
jeanpaulxiaojeanpaulxiao
1635
But now the header and the body have a different scroll bar, I would like for them to share the same one.
– Robert
Nov 21 '18 at 20:09
Try it again, I've updated it.position:stickyinstead offixed.
– jeanpaulxiao
Nov 21 '18 at 21:04
add a comment |
Use fixed width with position:fixed on header
.on-top {
position: sticky;
top: 0;
overflow-x: scroll;
white-space: nowrap;
width: 305px;
background: white;
}
Make sure the body has margin top to prevent overlap
.inner {
margin-top: 3em;
}
answered Nov 21 '18 at 19:33
jeanpaulxiaojeanpaulxiao
1635
But now the header and the body have a different scroll bar, I would like for them to share the same one.
– Robert
Nov 21 '18 at 20:09
Try it again, I've updated it.position:stickyinstead offixed.
– jeanpaulxiao
Nov 21 '18 at 21:04
add a comment |
Use fixed width with position:fixed on header
.on-top {
position: sticky;
top: 0;
overflow-x: scroll;
white-space: nowrap;
width: 305px;
background: white;
}
Make sure the body has margin top to prevent overlap
.inner {
margin-top: 3em;
}
answered Nov 21 '18 at 19:33
jeanpaulxiaojeanpaulxiao
1635
Use fixed width with position:fixed on header
.on-top {
position: sticky;
top: 0;
overflow-x: scroll;
white-space: nowrap;
width: 305px;
background: white;
}
Make sure the body has margin top to prevent overlap
.inner {
margin-top: 3em;
}
answered Nov 21 '18 at 19:33
jeanpaulxiaojeanpaulxiao
1635
edited Nov 21 '18 at 21:03
answered Nov 21 '18 at 19:33
jeanpaulxiaojeanpaulxiao
1635
answered Nov 21 '18 at 19:33
jeanpaulxiaojeanpaulxiao
1635
answered Nov 21 '18 at 19:33
jeanpaulxiaojeanpaulxiao
1635
1635
But now the header and the body have a different scroll bar, I would like for them to share the same one.
– Robert
Nov 21 '18 at 20:09
Try it again, I've updated it.position:stickyinstead offixed.
– jeanpaulxiao
Nov 21 '18 at 21:04
add a comment |
But now the header and the body have a different scroll bar, I would like for them to share the same one.
– Robert
Nov 21 '18 at 20:09
Try it again, I've updated it.position:stickyinstead offixed.
– jeanpaulxiao
Nov 21 '18 at 21:04
But now the header and the body have a different scroll bar, I would like for them to share the same one.
– Robert
Nov 21 '18 at 20:09
But now the header and the body have a different scroll bar, I would like for them to share the same one.
– Robert
Nov 21 '18 at 20:09
Try it again, I've updated it.
position:sticky instead of fixed.– jeanpaulxiao
Nov 21 '18 at 21:04
Try it again, I've updated it.
position:sticky instead of fixed.– jeanpaulxiao
Nov 21 '18 at 21:04
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418922%2fstatic-header-scrolling-body-with-long-header%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You will not be able to accomplish this with just CSS. You will need to use JavaScript.
– Peter
Nov 21 '18 at 19:12