Static header scrolling body with long header












-1















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







share|improve this question























  • You will not be able to accomplish this with just CSS. You will need to use JavaScript.

    – Peter
    Nov 21 '18 at 19:12
















-1















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







share|improve this question























  • You will not be able to accomplish this with just CSS. You will need to use JavaScript.

    – Peter
    Nov 21 '18 at 19:12














-1












-1








-1








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







share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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



















  • 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












1 Answer
1






active

oldest

votes


















0














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;

}





share|improve this answer


























  • 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











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
});


}
});














draft saved

draft discarded


















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









0














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;

}





share|improve this answer


























  • 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
















0














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;

}





share|improve this answer


























  • 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














0












0








0







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;

}





share|improve this answer















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;

}






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 21 '18 at 21:03

























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:sticky instead of fixed.

    – 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











  • Try it again, I've updated it. position:sticky instead of fixed.

    – 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




















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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







-

Popular posts from this blog

How to change which sound is reproduced for terminal bell?

Image
3 Recently upgrade to 18.10 from 18.04, and using the terminal is becoming annoying: the new alert sound is a drip ( /usr/share/sounds/gnome/default/alerts/drip.ogg ), and the previous one is still located at ( /usr/share/sounds/ubuntu/stereo/bell.ogg ). My issue is that at the gnome-terminal, when autocompleting or pressing left BOTH sounds are reproduced, at the same time. I want to just have ubuntu/stereo/bell.ogg active, not both . At the moment I have been only able to reduce the volume of the alerts (but still both are played), or turn the alerts down (but I dislike both "solutions"). gnome-terminal 18.10 teminal-bell share | improve this question
Read more

Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

Image
up vote 5 down vote favorite 2 I would like to make it so that the vertical space below the title of each chapter is the same when using the Bjornstrup package (i.e. so that the descenders do not affect the spacing - as shown by the red arrow in the picture below). I think I'm fairly happy with the spacing around "A chapter", so I'd really like titles without descenders (e.g. "Contents") to have the same vertical spacing as "A chapter" below the title. I would also like to remove the large "0" in the contents title. Any help appreciated, as always. documentclass[11pt,a4paper]{book} % Packages[![enter image description here][1]][1] usepackage[left=3.5cm, right=3.5cm, top=4.3cm, bottom=4.25cm]{geometry} usepackage[utf8]{inputenc} usepackage{libertine} usepackage[libertine]{newtx
Read more

Can I use Tabulator js library in my java Spring + Thymeleaf project?

Image
0 I want to add Tabulator js to my java project. I added tabulator.min.js, tabulator.min.css to resources folder. After that added to my html page these dependencies as recommending in readme.md. <link rel="stylesheet" th:href="@{/css/tabulator.min.css}"> <script type="text/javascript" th:src="@{/js/tabulator.min.js}"></script> Now my tables view all elements, that I have in the html page, but not correct. In the documentation of Tabulator is example how to create header and table, var table = new Tabulator("#example-table", { columns:[ {title:"Name", field:"name", sorter:"string", width:200, editor:true}, {title:"Age", field:"age", sorter:"
Read more