Jumping navigation bar issue - javascript

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

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>

Unable to scroll mobile dropdown menu inside of fixed header

So I made a fixed dropdown menu that changes to a hamburger menu for mobile. Everything works fine on desktop but on mobile I'm unable to scroll the menu items. I have tried a plethora of suggested fixes for this but none of them fix my issue. Most of the fixes I've come across have included some form of the following but have not worked:
max-height: 300px;
overflow-y: scroll;
Here is a fiddle of what I have right now:
https://jsfiddle.net/doitliketyler/2gqd0hLs/3/
The black square is the mobile hamburger button. Does anyone know how to get this working properly and smoothly for mobile? Any help would be greatly appreciated. Thanks so much.
A position of static will prevent scrolling.
So to fix this, you have to set your menu to a position of something like relative for mobile.
So for the .header selector inside the #media only screen and (max-width:960px) media query, set the position to relative.
#media only screen and (max-width: 960px) {
.header {
padding-bottom: 0;
position: relative;
}
}
Edit 1:
To keep the fixed menu, one option is to set the dropdown portion to be a position of absolute with an overflow-y.
#media only screen and (max-width: 960px)
.header .header__column--navigation {
margin-top: 80px;
position: absolute; //Added
min-height: calc(100vh - 110px); //Added: set the second parameter of calc to the height of your header. ex: https://c.flm.pw/2018-06/6oiip.png
height: 100%; //Added: Tell the absolute div to take up as much height as it needs.
overflow-y: auto; //Added: Make the absolute div have the ability to scroll, but hide the scrollbar when it doesn't.
}
}

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*/
}

Center Elements on Screen while Keeping Responsiveness

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

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