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>
Related
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>
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;
}
So I have a page layout that has a main content container div that is position relative. With in this container I have two other layout divs, one acting as a side bar the other acting as a content container that can scroll up and down. This div also has a heading bar that must remain in place when you scroll through this div. If I fix the position the heading bar it will stay in place with out a problem as long as you scroll with in that container. If you scroll the entire window though (outside the wrapper div) the header bar scrolls along with it. I know why this is happening but would like to know if there is a way to fix it or prevent this behavior. I do not mind using Javascript to do so either. I understand that that fixed positioning only makes the element fixed to its parent container.
This is most likely hard to understand at least lay out wise through just text so here is a very simple example fiddle of just some mark up showing which items are fixed and how they are sort of laid out. http://jsfiddle.net/gvNqv/
Thanks a bunch for any possible help with this!
EDIT: Adding code from fiddle here
.maincontent{
position:relative;
width:760px;
}
.sidebar{
float:left;
}
.stage{
float:right;
position:relative;
}
.headbar{
position:fixed;
}
<div class="wrapper">
<div class="mainContent">
<div class="sideBar"></div>
<div class="stage">
<div class="headbar">banner text</div>
</div>
</div>
</div>
enter code here
Don't you need to use top, left, bottom or right for it to get fixed to something?
I have a big div with lots of items that I have moving to marginLeft='120%' on an event. I used overflow:hidden to keep it from showing a horizontal scrollbar. But the webpage vertical scrollbar length gets bigger when it moves to the right. I want the div to disappear off the screen(I have it HTML5 transitioning when it does that) but not affect the rest of the page. What am I doing wrong?
The content is not actually moving to the right because the container isn't wide enough so the default action is to drop the content to the next line, hence the vertical scroll.
Try adding another div within the wrapping div with a large width, that way the content will have enough room to actually move to the right.
<div id="wrapper">
<div id="inner">
<div id="content"></div>
</div>
</div>
CSS...
#wrapper {
overflow: hidden;
}
#inner {
width: 9000px;
}