When I use Facebook's dashboard, and I just scroll down the browser, I can see only the main part(newsfeed at home) scrolled to down with infinite scrolling and another parts are fixed on side and top of the screen. How do I implement like this? I mean, scrollbar is on the right side of browser on the Facebook while the scrolling part is just the main contents part, not the inner side(I mean, not at the right side of the inner part - newsfeed). I tried to copy and clone-coding the Facebook and the left side of main(name, Friends, Watch, Group, Events, etcs) scrolled down together.
Real Question is -
How can I just scroll down the part I want, not the whole part?
Please check the image below to make sure what this question is clearly about.
https://i.stack.imgur.com/00uB6.png
Here is an example of structure
.header {
position: fixed;
top: 0px;
background: blue;
width: 100%;
}
.wrap {
display: flex;
position: relative;
top: 15px;
}
.menu {
width: 100px;
position: fixed;
}
.main {
height: 1500px;
border: 1px solid black;
margin-left:100px;
}
<div class="wrap">
<div class="header">Header</div>
<div class="menu">side menu</div>
<div class="main">main</div>
</div>
Check this sample design below. This might help.
Basically, I have used the flex layout as the one to create the page and then I've hidden the scrollbar for the news feed container.
for (var i = 1; i <= 200; i++) {
document.getElementsByClassName("container2")[0].innerHTML += 'scrollable area ' + i + '<br />';
}
* {
margin: 0;
}
.main-container {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
}
.container1 {
background-color: #a00;
flex: 0.2;
position: sticky;
top: 0;
align-self: flex-start;
}
.container2 {
background-color: #0a0;
flex: 0.8;
overflow: auto;
}
.container2::-webkit-scrollbar {
width: 10px;
}
<div class="main-container">
<!-- keeps both containers -->
<div class="container1">
<!-- container1 has page links, group links (left side of facebook) -->
Unscrollable area. This will contain the page links, group links and others. This is the left side on facebook.
</div>
<div class="container2">
<!-- container2 has the scrollable news feed -->
This is the news feed. You can use javascript to load more content when user reaches the scroll end of this element. <br />
</div>
</div>
Related
I have a website header which appears full-size and is positioned absolutely such that it allows the underlying content to be partially visible 'behind' it. It should scroll off screen as the user scrolls down the page.
When the user hits a certain scroll point, 400px down the page, the header should re-appear in a fixed position at the top of the viewport and should be a smaller/minimal version. To facilitate this in a performant way (i.e not using window scroll events) I'm using an invisible marker and setting an IntersectionObserver on it to set a class on the body when the marker has been hit.
This works nicely, although please run this in a full-size viewer as the small inline version doesn't work so well (something I will address, but not part of the question):
let waypoint = new IntersectionObserver(entries => {
document.body.classList.toggle('waypoint-passed', !entries[0].isIntersecting);
});
waypoint.observe(document.querySelector('.waypoint'));
* {
margin: 0;
padding: 0;
}
.header {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 10;
background-color: rgba(0,0,255,0.5);
color: #fff;
}
.header__full {
padding: 100px 0;
}
.header__min {
padding: 20px 0;
display: none;
}
body.waypoint-passed .header {
position: fixed;
}
body.waypoint-passed .header__full {
display: none;
}
body.waypoint-passed .header__min {
display: block;
}
.section {
aspect-ratio: 4 / 3;
background-color: #ddd;
color: #333;
display: grid;
place-items: center;
}
.section + .section {
margin-top: 10px;
}
.trigger-indicator {
border-top: 1px dashed red;
color: red;
position: absolute;
top: 400px;
right: 0;
left: 0;
}
.waypoint {
position: absolute;
top: 400px;
width: 0;
height: 0;
}
<header class="header">
<div class="header__full">Full Header</div>
<div class="header__min">Minimal Header</div>
</header>
<section class="section">Section 1</section>
<section class="section">Section 2</section>
<section class="section">Section 3</section>
<section class="section">Section 4</section>
<div class="trigger-indicator">Trigger Point</div>
<div class="waypoint"></div>
However, the last requirement is proving tricky! I need the minimal version of the header to slide down into position when the trigger point has been passed as the user scrolls down the page and then slide back up when the trigger point has been passed when the visitor scrolls back up.
The most performant way to do the animation is via CSS transform: translateY() so I'd like to implement it like that, but I just cannot figure out a nice way to trigger the slide down/up transitions.
I want to have my footer at the bottom of the page. If the page is long enough, I want to have to scroll to the footer. If the page is too short, I still want my footer at the very bottom of the viewport. I don't mind the empty space.
How can I achieve this as painlessly as possible?
I tried navbar-static and nav-bar fixed and they both don't do what I am looking for. Is filling the space with a spacer div or something the only way or is there a more elegant way using CSS3 or some javascript?
Open to any and all ideas/suggestions.
This is the HTML I have. Nothing special coz I tried position: absolute;bottom:0px; and that put the footer at the bottom of shorter pages but in longer pages the bottom hangs in the mid of the page overlapping content.
This code puts the footer at the bottom of the page but in pages which are shorter than the window/viewport the footer sort-of hangs in the middle (at the end of the content).
.body
{
height: 100%;
}
.bottomMenu
{
background-color: #backgroundColor;
border-top: solid 1px (#backgroundColor - #292929);
}
This is an example from the official Bootstrap documentation.
And here is the code:
HTML
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
CSS
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
Considering this css:
.stickToBottom {
position: fixed;
bottom: 0;
}
You need to detect if vertical scroll is present using javascript :
function isVerticalScrollPresent() {
return document.documentElement.scrollHeight !== document.documentElement.clientHeight;
}
Then add "stickToBottom" class to the footer if this function returns false :
var footer = document.querySelector('footer');
if (!isVerticalScrollPresent()) {
footer.className += " stickToBottom";
}
You can ignore css code and set footer style with javascript.
Check this JsFiddle https://jsfiddle.net/LeoAref/9v0r7h9y/
HTML
<footer>Footer Content</footer>
CSS
html {
height: 100%;
}
body {
min-height: 100%;
padding-bottom: 25px;
}
footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: red;
color: #fff;
padding: 7px 0;
text-align: center;
}
You may need to use box-sizing: border-box; if you won't use bootstrap
So I want to hide a div for user settings, which shows when the user clicks on a little cog icon. What is the best way for me to go about this?
I made a couple of very basic pics to show what I'm after:
Closed:
Open:
Once the user clicks the icon (the red dot) then I want the hidden div to push the content to its right over. I had a look at the CSS checkbox hack, but that requires the user to click directly on the icon (the red dot) again to close the hidden div. I would like to have it so the user can click anywhere else on the page to close the div.
Anyone know how to do this with pure js?
Any help is greatly appreciated, thanks!
You can try tabindex="-1" in order to use :focus.
This way you can achieve it with pure CSS.
#wrapper {
display: flex;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
}
#sidebar, #main, #hidden:focus {
padding: 10px;
}
#sidebar {
background: #A8D4AF;
}
#main {
flex-grow: 1;
background: #96A7B1;
}
#hidden {
width: 0;
background: #008DD2;
}
#hidden:before {
content: '';
display: block;
background: red;
border-radius: 50%;
position: relative;
left: -40px; top: 40px; /* Position of the dot*/
width: 20px; height: 20px; /* Size of the dot */
margin-bottom: -20px; /* Same as height */
}
#hidden:focus:before {
display: none;
}
#hidden:focus {
width: auto;
}
<div id="wrapper">
<div id="sidebar">
Test content
</div>
<div id="hidden" tabindex="-1">
Hidden stuff
</div>
<div id="main">
Lorem ipsum dolor
</div>
</div>
I want to have two fixed nav bars one on top and other at some center of the page. When scroll reach to second nav first should hide (or become relative) &
second should become fixed bar. And when we move up the second nav now become relative (not hide) and fist one will again start showing again.
fiddle
<div id="nav01">
</div>
<div class="content"></div>
<div id="nav02">
</div>
<div class="content"></div>
#nav01
{
height: 100px;
background: red;
width: 100%;
position: fixed;
top: 0;
}
#nav02
{
height: 100px;
background: blue;
width: 100%;
}
.content
{
height: 2000px;
background: #ccc;
width: 100%;
}
I have seen many jquery plugins but not found them useful - I am not good in scripting so need your help thanks in advance.
You have to add the below code
$(document).ready(function(){
$(window).scroll(function() {
if($(window).scrollTop()>2000){
$("#nav02").css("position", "fixed");
$("#nav02").css("top", 0);
$("#nav01").hide();
} else {
$("#nav02").css("position", "relative");
$("#nav01").show();
}
});
});
See this fiddle http://jsfiddle.net/P8Hzx/1/
I am in a corner with this one. I have a layout with 2 containers. One of the containers represents a map (#main) and needs to stay in user view at all times, the other one (#sub) serves as a scroll-able content. Everything looks fine if content fits horizontally. However as soon as the horizontal bar appears (resize the window to replicate), the scroll-able content overlaps the fixed content and I am out of ideas how to fix it. I know of one way to fix it by positioning the fixed content absolutely instead and useing javascript to adjust its position from the top. Is there any way to fix it?
Sample code is below:
Html:
<div id="content">
<div id="main">main</div>
<div id="sub">
<strong>Sub</strong><br />
sub<br />
sub<br />
sub
</div>
</div>
Css:
#content {
width: 1200px;
margin: 0 auto;
}
#main {
position: fixed;
width: 849px;
height: 500px;
background: red;
}
#sub {
position: relative;
float: right;
width: 350px;
height: 3500px;
background: green;
}
JSFiddle link
Based on your comments it sounds like not allowing the user to scroll will solve the issue:
body {
padding: 0;
margin: 0;
overflow-x:hidden;
}
If you want them both to scroll you have to remove the fixed positioning:
#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
float:left;
}