Center Elements on Screen while Keeping Responsiveness - javascript

I'm trying to figure out a way to position the brown chevrons such that as the it vertically stays at the center of the screen as the user scrolls but does't cut into either the header image or footer.
I know this can be solved with position: absolute, but I want to keep Bootstrap's responsiveness. How do I go about doing that?
Header
Footer

Use Jquery scrollTop to detect when you are at the top or bottom of the window, and then toggle different css classes for the element at different scrollpoints.
I also think you are looking for position "fixed" as opposed to "absolute".
$(window).scroll(function(){
if($(window).scrollTop() > 200){
$('selection').toggleClass("your-class");
} else {
$('selection').toggleClass("your-class);
}
})
.your-class {
position: relative;
margin-top: 200px;
}
selection {
position: fixed;
margin-top:50%;
}

Related

React JS: How to implement scroll bar in one particular div?

I am creating a movie app. I am facing some problem on implementing the scroll bar.
While scrolling I want the header div to remain where it is. I don't want it to disappear while scrolling down. But the div located vertically bottom to the header must be scrollable.
This can be found in amazon.in
On searching Harry Potter, this page loads
On scrolling down, you can see that the header remains fixed.
How can I implement this in React?? Please share the necessary code/documentation. Thanks!
This actually has nothing to do with React. This has to do with basic HTML and CSS knowledge.
Here is my preferred method:
<div id="navbar">...</div>
<div id="content">...</div>
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
#content {
margin-top: /* size of navbar */ 50px;
}
You can add scroll bar in a div by using overflow property with some height.
CSS:
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
HTML:
<div class="ScrollStyle">
Scrollbar Test!<br/>
Scrollbar Test!<br/>
</div>

Jumping navigation bar issue

My problem is quite complex (difficult to explain at least).
I have a responsive navigation bar that is by default NOT on the top of the page but you have to scroll down a bit for the navbar to reach the top of the browser window.
On desktop (48em<) one can simply scroll through the navbar (so it simply disappears when scrolling down) but when scrolling back up, it gets a "sticky" class (thanks to JS) and appears on top.
On mobile, the navbar gets sticky once the scroll position reaches the navbar element.
My problem is with the mobile view. I had to add a piece of CSS code so that the page content won't flicker (jump) when scrolling down. (I only need it when the sticky class is added by JS.)
.sticky + .content {
padding-top: 58px;
}
Which works just fine when the hamburger menu is CLOSED.
When the menu is opened, the navbar's height changes and it requires more padding on top for it not to make the page content jump. See the gif below. 🤔
If I change this padding to 248px then the content doesn't jump when the menu is opened, but it jumps when it's closed. 🤦‍♂️
.sticky + .content {
padding-top: 248px;
}
I guess I should write a piece of JS code that would do this:
If nav checkbox is checked then change .sticky + .content {padding-top: 248px;}
If it's unchecked change it back to .sticky + .content {padding-top: 58px;}
All this only below 48em. On desktop the padding is supposed to be 0.
Here's a fiddle with the code:
https://jsfiddle.net/zsoltszilvai/t0zLv7yn/48/
I don't know much about JS so any help would be appreciated.
The problem is not in the padding-top.. Actually you shouldn't manipulate your sticky class. CSS position: sticky does for you all the job automatically. You have to fix 3 things:
You don't need to toggle .sticky class on scroll.. You have to remove this code:
// You don't need this all
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
you permanently add class sticky to the header
<header class="header sticky" id="navbar">
You remove
#media (max-width: 767px) {
.sticky {
/* position: fixed; You don't need this */
}
}
Check this fiddle:
https://jsfiddle.net/tyminko/coetd4jx/1/
The modern answer to you problem is to position submenu with absolute.
.big-wrapper-main {
position: relative;
}
.menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 5;
background-color: white;
}
Submenu positioned that way doesn't change the height of the parent, is positioned after it (because of top: 100% - 100% stands for 100% height of the parent).
The problem is that you are using float and clear and we don't do it in web development for the while now and the height of your .big-wrapper-main is 0px so you have to add position relative to #navbar (when it is not fixed).
I had to add .header.sticky to overwrite position relative.
.header.sticky {
position: fixed;
}

fixed header, then scroll with content

I have a layout that is to start with a fixed header, containing a logo, etc.
Further down the page is content.
The fixed header should stay fixed as the user starts to scroll, but then as the content scrolls up the screen and comes close to touching the fixed header area, then the fixed header scrolls off the screen along with the content.
I have managed to sort of get this working using the following:
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() >= ($("#headerarea").height() + 85)) { $("#headerarea").removeClass("header-fixed"); $("#headerarea").addClass("header-scroll"); } else { $("#headerarea").removeClass("header-scroll"); $("#headerarea").addClass("header-fixed"); }
});
});
</script>
My CSS includes:
.header-fixed {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 140px;
z-index: 150;
}
.header-scroll {
position: absolute;
top: 225px;
left: 0px;
width: 100%;
height: 140px;
z-index: 150;
}
This allows the header area to stay fixed until the page scrolls to within 85 pixels of the header area, and then the header becomes normally scrolling with the rest of the page content.
This seems to work ok if I scroll the page using the scrollbar slowly.
But if I scroll quickly, or use a mouse wheel, then the header 'jumps' a lot.
Like when using the mouse scroll wheel, the header will jump down the page with the scrolling content, past the position it should stay fixed, then it will see that it has passed that position and jump back up to the fixed position again. This doesnt look good at all.
But I cant think of any other way to get this same effect.
Any suggestions on how to get this working better?
EDIT: Position:sticky seems to work, but I would ideally like to have a solution that will also work on IE, which position:sticky wont do.
Have you looked into position: sticky;? I think it's describing a lot of what you want here. Notably, the sticky stuff will go back to scrolling with the rest of the content once its parent div is outside of the viewport. https://css-tricks.com/position-sticky-2/

Using postition:sticky for the bottom of a div Container

Since Bootstrap 4 doesnt Support .affix anymore, i have to find a other solution for a fixed box.
I want a div Container stay fixed when you scroll to it. For now i solved it with
.fixedcard{
position: sticky;
top:75%;
}
Now i got the problem, that the sticky part starts from the top of my div Container. This causes the problem, that the view differentiate on smaller device. I want to fix the div Container 25% from bottom starting by the bottom of the div Container.
I tried to illustrate my problem.
Try using CSS calc() for it to work out 0% + height of element.
.slider {
height : 300px;
position: sticky;
top: calc(0% + 300px); /*Height of element*/
}

Javascript: having a scrollable fixed position element

I'm trying to achieve the following:
I have a pop-in menu docked to the left side of the screen.
The menu has only a small tab visible. Upon hover - it pops to accommodate its content.
The problem is, my pages are sometimes a few screens in height.
And sometime, so is my menu.
I wish to be able to dock my menu to a fixed position (so the tab is always visible), and have the menu scrollable, without the ugly scrollbars.
How could this be achieved?
Add to your css:
html,body { height: 100%; }
#menu { height: 100%; overflow: auto; position: absolute; top: 0px; }
Make sure the #menu is a direct child of body.
If this doesn't work, give me a link to a demo, or make one in http://jsfiddle.net/

Categories

Resources