I have a navbar that needs to be kept fixed in horizontal scroll, it already kept fixed for normal(vertical) scrolling, but during horizontal scroll, it gets scrolled away
Ideally, as per web development standards, you shouldn't have horizontal scrolls on your webpages as this is considered as bad practice.
But still for any specific case you want to do it then you can use style position:fixed to do it.
HTML:
<nav class="fixedbar">
...
</nav>
CSS:
.fixedbar {
position: fixed;
}
Or using inline CSS:
HTML:
<nav style="position: fixed">
...
</nav>
Related
I am working on a menu, that is fixed to the right side of the page. I am using some JavaScript that keeps the menu in it's fixed position until the site reaches a specific spot (243px from the top - which clears my header). All of this is working as I intended...but I'm looking for a way for the menu to stop scrolling at a specific number of pixels from the bottom (To clear my footer - 600px).
The JavaScript looks like:
$(window).scroll(function(){
$("#side").css("top",Math.max(15,243-$(this).scrollTop()));
});
The HTML looks like:
<div class="menu">
<div id="side">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
</div>
The CSS looks like:
.menu {
right: 0;
position: absolute;
top: 243px;
width: 250px;
z-index: 5;
}
#side {
background: #ace;
position:fixed;
width: 250px;
}
JS Fiddle: https://jsfiddle.net/050dqcea/
Original solution (scrolling from top): Stopping fixed position scrolling at a certain point?
I think I understand now, the fiddle didn't have jQuery loaded so it just wasn't running as intended.
You can change how you want this to show or hide, that's up to you. I'd make a bit of a comment about how irritated your users might be that the menu disappears but that is up to you to decide. Alternatively you can use these triggers to "refix" your menu. The world is your oyster, etc.
I've used $("#side").offset().top here. The idea is to check when the menu's bottom has scrolled to the top of the footer. Then to bring it back we check if the vertical scroll is less than the offset of the top of the footer.
A fiddle for you: https://jsfiddle.net/5p90s06n/1/
I'm building a website using bootstrap affix to manage the main menu. It seems to work perfectly on fairly short pages but I find that as page length increases the menu starts to get jumpy, jittery, as you scroll so I created 3 sample pages to illustrate the problem. Other than some extra content to promote additional scrolling the implementation of affix is identical.
Typically when I scroll I use the navigator scrollbar - the behavior appears more pronounced using the scrollbar vs keyboard up/down arrows and perhaps more so on Linux Firefox vs Chrome.
The affix CSS settings:
.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
}
.affix + .affix-content-container
{
position: relative;
top: 50px;
}
.navbar {
margin-bottom: 0px;
}
I use the class, affix-content-container, on the div to contain all the body content following the bootstrap nav. Here are the links to the 3 varying length demo pages:
affix short page
affix medium page
affix long page
I've looked at some other websites which use something like affix, much longer pages, and they seem to behave more smoothly. Any suggestion how to smooth this out?
Here is a link to a video from Firefox. With each page I first use the mouse and scrollbar, then just the arrow keys. The green horizontal line is there for perspective, helps illustrate the problem.
Affix Video Demo
Workaround Solution Update: 2018-01-23
I added CSS transitions to .affix, in-out, etc, but they have no effect. It is still jumpy. So I thought back to the goal which is a navbar that scrolls to the top and smoothly fixes to the top of the page. I'm not much good with javascript, but I found some code and modified it:
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 120) {
$('nav').addClass('fix-navbar-position');
} else {
$('nav').removeClass('fix-navbar-position');
}
});
</script>
I set the height of the header to 120, the scroll then fix height:
header { height: 120px; }
I found that if I set it up as: that I was seeing some odd margins or extra vertical padding, so I separated it so that nav would be an outer container only - and this worked:
<nav>
<div class="navbar navbar-default navbar-inverse">
The problem seemed to have something to do with the .navbar styling. To see the workaround solution visit: javascript-scroll-fix
Is there a way, to prevent the resize behaviour on touch devices?
My problem is that what if I have a section which height is 60vh. This section is at the top of the page. When the user start scrolling, the address bar is disappearing from the window, and the browser is refreshing the vh unit (If i'm correct).
index.html
<section class="top-section">
<!-- lots of code here -->
</section>
style.css
.top-section {
height:60vh;
}
Is there a way to fix this in CSS, or there is no other way and use Javascript for that.
If you are speaking about creating your top bar ( with navigation buttons and stuff), most correct way to hide fixed element would be to use JS.
You have two options:
option 1) have relative top bar. and it will hide when you scroll
option 2) have it fixed, but use a listener (scrollTop()) to decide when to open/close the top bar.
i made an example for you. the vh value is not changing if you add/remove items. it will only change on screen resize not on document resize. see snippet below ( the height of topsection will appear on scroll as text inside the section, and it's not changing ) or jSFiddle
$(window).on('scroll',function(){
if ( $(this).scrollTop() > 0 ) {
$(".address-bar").hide()
}else{
$(".address-bar").show()
}
$(".top-section").text($(this).height())
});
.address-bar {
height:5vh;
background:blue;
}
.top-section {
height:60vh;
background:red;
}
.content-section {
height:100vh;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="address-bar">
</section>
<section class="top-section">
</section>
<section class="content-section">
</section>
Hi I've got a nav menu that changes to fixed once scrolled down the page a certain amount of pixels.
Because the menu is fixed, it overlays the top cutting out the header of that section.
I'm looking to affect how far the page moves when using the menu to move to a section on the page, so sort of negatively offset how far the page scrolls down to show all the menu aswell as section header if possible.
Thanks!
I've come across this issue and came up with the following solution:
<nav class="fixed">
About
...
</nav>
...
<div id="about" class="anchor-helper"></div>
<div class="container-i-actually-want-to-see>
<!-- your content goes here -->
</div>
In the CSS:
nav {
height: 50px;
}
.anchor-helper {
position: relative;
top: -50px; /* however tall your nav is, you want this to be negative that amount */
}
What I like about this solution is that it relies on CSS as much as possible and only uses javascript for smooth scrolling. If someone navigates to http://your-site.com/example-page#about, they will get to where you want them to be.
I have the page with structure something like this:
<div id="header"></div>
<div id="messages"></div>
<div class="content">
<div id="sidebar"></div>
<div id="content"></div>
<div id="other_stuff"></div>
</div>
Header is the header of the page.
Messages div is the place where I push messages. Sometimes it filled, sometimes it empty.
Sidebar is navigation menu.
Content is a long scrollable div.
And other stuff is other stuff.
I need to make sidebar be fixed in the page on the left side when content are scrolled. But sidebar should never overlay messages and header.
In other words, when I scroll down the page, header and messages are scrolled with content normally. But when I scroll up the page, sidebar should't overlay messages and header div's.
I've used CSS property position: fixed; for this but with this property sidebar overlays messages. How can I fix this with CSS and javascript/jQuery?
If I got you right, you want the sidebar to be fixed starting from a particular point.
This can be achieved through the jQuery. There are many ways, at least 3 I know. Here is the pure jQuery version i use in the cases like that (if you don't want to embed other external JS libraries)
jQuery(document).ready(function ($) {
$fixed_id = $('#Mod128, #Mod190'); //classess or IDs of the modules you want to stick
$(window).scroll(function(){
if($(window).scrollTop()>254) //amount of pixels from the top of the viewport when the sticky styles applied
{
$fixed_id.css({position:"fixed", top:0, width:"18%"}); //sticky styles items when scroll to a particular place
}
});
});
Other ways of doing that are using other JS libraries, I know 2 of them:
1) jQuery Waypoints
2) stickyjs.com
Hope that helps.
Its good if you can make jsfiddle of it or else I think something like below code can help you.
Fix height of your header and messages and give margin to the sidebar with total height of you header and messages.
#header, #messages {
height:3em;
}
.content #sidebar {
position:fixed;
margin-top:3em;
width:5em;
}
.content #content,.content #other_stuff{
width:3em;
margin-left:5em;
}