I'm currently working on a new web project which is a horizontal scrolling portfolio site. I'm almost done, there is just one piece of code that won't work like its supposed to.
I've got a burger menu in the top left of the screen that contains anchor links that are supposed to smoothly scroll to the referenced id. Problem is that as soon as you scroll the page, the scroll distance gets messed up and the scroll distance gets totally messed up.
Here is the link to the page: http://www.timbrack.de/#portfolio
To reproduce the error hit the burger menu and click on 'about' it will just scroll backwards for a couple of pixels even though about is on the right of the portfolio section...
I use white-space: nowrap for the containers to fit horizontally like this:
body {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100%;
width: auto;
position: relative;
}
.content_container {
display: inline-block;
vertical-align: top;
height: 100%;
padding: 100px 100px 100px 100px;
box-sizing: border-box;
position: relative;
min-height: 500px;
vertical-align:top;
}
the piece of script for scrolling looks like this:
$(".scroll").bind("click",function(event){
var $anchor = $(this);
$("body").stop().animate({
scrollLeft: $($anchor.attr("href")).offset().left
}, 1200);
event.preventDefault();
});
Do you guys have any idea why the scrolling distance gets so messed up?
Cheers
Tim
Related
I'm trying to set up a scrolling gallery, but not sure how to proceed.
The following is what I'm looking for (see attached as well):
15-20 images with different sizes
Define spacing between the images (pink areas)
The container to be the specific height on certain breakpoints (desktop, tablet, mobile), and then which the images will adapt to in order to keep their ratios and layout according to my attached example.
Scroll from right to left and start over once the last image is being shown, so it starts over smooth.
I'm thinking the following, but don't know how to make the images adopt the right way depending on screen size?
.container{
display: flex;
position: relative;
max-height: 700px;
height: 100%;
width: 100%;
overflow-x: hidden;
}
.image{
display: block;
position: absolute;
}
I've been looking into sticking a "div" to the top of the screen when you scroll past it, or making the div scroll with the page when it reaches the top of the screen.
The issue i get when i try this matter is that changing to position: fixed; using either jquery or the simple css, removes the float from the element.
My layout look somewhat like this: http://jsfiddle.net/ThSXm/33/ <-- updated
So when the float is removed, the id="content" get's overlapped by the sidemenu, making the sidemenu bigger and out of place.
I need a solution where you dont have to alter the position of the elements or if there is some fix i can make on the content div so it wont get overlapped when changing the positions.
Update
Sandeeproop managed to help me with the positioning, but the scroll matter is still a issue.
As i mentioned in the comment for this question, the div has to scroll/stick to the top of the screen when the div is close to the top or reaches the top (and preferably stop once the div reaches the footer or is close to reaching the footer), because there are more divs (header/slideshow etc) before we reach the side menu, and you wont see the menu if you just use position: fixed.
Any thoughts?
/update
Looking forward to some answers!
//Jim
If i understand you question correctly.
Please check this fiddle.
#nav {
width: 136px;
position: fixed;
background: #FF0000;
margin-left: 1em;
margin-top: 1em;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 170px;
margin-top: 1em;
}
You can set fixed margin-top values for nav and content elements.
Something like that http://jsfiddle.net/ThSXm/26/
#nav {
width: 15%;
height: 100%;
float: left;
background: #FF0000;
margin-left: 1em;
margin-top: 60px;
}
#content{
width: 80%;
height: 600px;
background: #FF9966;
float: left;
margin-left: 1em;
margin-top: 60px;
}
I guess what you are looking for is "position: sticky".
This is not yet supported by many browsers, but here is a pollyfill for it
http://philipwalton.github.io/polyfill/demos/position-sticky/
Have you considered a solution where you use position:absolute on the element?
Have it being absolute untill you need it to stick and then change it to fixed.
Here is a simple fiddle:
http://jsfiddle.net/dXe97/
if ($(this).scrollTop() > boxTop) {
$box.css({
'position':'fixed',
'top': 0
});
}else{
$box.css({
'position':'absolute',
'top': 150
});
};
The .box element is absolute positioned, but when you scroll down passed the element, it is changed to fixed and its top value is set to 0, and back again when you scroll up.
I have this jfiddle that I found that I modified a little bit to my liking. The problem is that I can not get the alignment correct. My goal is to have the five columns centered when they are all collapsed and have them centered when one is expanded.
http://jsfiddle.net/422MP/
#mainContainer
{
margin:0 auto;
width: 500px;
height: 100%;
overflow: hidden;
}
.sidebar
{
float: left;
height: 300px;
width: 20%;
/* left: 565px;*/
border: 2px red dashed;
/*position: relative;i*/
overflow: hidden;
margin:0 0px 0 10px;
}
** EDIT ** To be a little clearer, it seems that when one div is expanded it is centered. When they are all closed, they are aligned toward the left.
Thanks!
Demo here: http://jsfiddle.net/422MP/34/
It's a lot easier when you have fixed widths for your elements, which is what I did. But the javascript is much cleaner as well.
To center the elements, you simply get rid of the float: left style, which will wreak havoc with center alignment, and set the text-align of the container to center.
All of the sidebars are float: left and the javascript is actually making them width: 10% when they are closed, which means that they only end up occupying the left half of the container. The div containing all of the sidebars is actually centered. You probably want to alter the JS to leave them at 20% and widen the containing div when one opens.
The website displays fine on all resolutions, the problem arises when the window is resized.
So what I have done is create 5 div containers and given each container 20% width within a body of 500% width. Below is one of them
<div id="workslide" class="container">
//some a tags goes here
</div>
CSS
.container {
bottom: 0;
float: left;
height: 100%;
margin: 0;
position: relative;
width: 20%;
}
Within each container is an img slide which is set in css background-size: contain; which scales correctly for all resolutions. When the window is resized from the left, for example, this happens. The previous div bleeds in :
Any ideas would be appreciated !
I implemented a fix for the problem after the pointer from Matt. Works perfect now:
//added following lines of code within document ready:
$(window).resize(function() {
$(window).scrollLeft($(/*element you have scrolled to*/).offset().left);
});
wondered if any one knew of a way of creating a floating menu bar that sticks to a point on a page until the browser window gets far enough down the page and unsticks it and then the menu bar begins to scroll along with it. The effect I want is the exact same as this http://www.jtricks.com/javascript/navigation/floating.html javascript menu. However, I really want to do this with CSS. I am aware I can make the div Absolutely positioned and it will move down the page, I tried making one DIV relative positioned (parent div) and then another div inside this which was absolute positioned, but I could not get this to work. Does any one know how to make this work with CSS or does it need to be JS?
Thanks in advance.
Jon.
I believe using javascript is the only solution to get the effect you described. Here's a quick demo of a banner that starts in a absolute position and goes to fixed when the user scrolls.
<div style="height:1000px;width:500px;">
<div id="floatbar" style="background:gray;
width:200px;
height:40px;
position:absolute;
left:0;top:200px;">
</div>
</div>
$(window).scroll(function(){
if ($(window).scrollTop() >= 200)
{
$("#floatbar").css({position:'fixed',left:'0',top:'0'});
}
else
{
$("#floatbar").css({position:'absolute',left:'0',top:'200px'});
}
});
well if you do NOT need the animation, than just use
position: fixed;
in the css.
if you want it animated you need to use javascript.
for example in jquery:
$(window).scroll(function(){
$('#menu').css({
right: 0,
top: 0
})
})
Well you can't do it with absolute positioned div inside of a relative. Fixed position is basically an absolute positioned div, positioned relatively to the window. I'd say you definately need javascript here.
This should be rather easy with a fixed sidebar, and a floating content section. Try something like this...
#container {
width: 960px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#sidenav {
width: 300px;
position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/
}
#content {
float: right; /*--Keeps content to the right side--*/
width: 620px;
padding: 0 20px 20px;
}
This is old post but CSS has changed a lot since then, we can do a floating menu with plain CSS. See sample code below. Credit to https://www.quackit.com/css/codes/css_floating_menu.cfm
main {
margin-bottom: 200%;
}
.floating-menu {
font-family: sans-serif;
background: yellowgreen;
padding: 5px;;
width: 130px;
z-index: 100;
position: fixed;
right: 0px;/* You can change float left/right */
}
.floating-menu a,
.floating-menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}
<!DOCTYPE html>
<title>Example</title>
<main>
<p>Scroll down and watch the menu remain fixed in the same position, as though it was floating.</p>
<nav class="floating-menu">
<h3>Floating Menu</h3>
CSS
HTML
Database
</nav>
</main>
I believe it needs to be JS. I can imagine it can be rather simple with jQuery and I really cannot think of any way to achieve this only with CSS. I'll try to think about it, but I doubt I'll find a solution.