Position Fixed to the Window - javascript

I have a Tumblr account and I'm working on editing the html of it. My question is this: how do I make my side bar be in a certain position but then when I scroll down on the page, it stays where it is relative to my browser? For an example of what I'm talking about, click ask a question and look at "similar questions" then scroll. I would prefer for it to be in CSS. I have already tried everything I can think of.
http://snipt.org/AGff7
That is the code that I'm starting with, plus my custom CSS which is at the end of <style>
I have already tried position:fixed.
I want it to start in the middle of the browser window then when i scroll down, it hits the top of the window and stays fixed relative to the window.

You're definitely going to need to make use of JS for this as CSS won't be able to detect scrolling. Here's a basic example:
<div id="scroller" class="floating"></div>
This is our original element, where it's already partially down the page and floating in the middle. style like
.floating{
margin-top: 50px;
}
We then need to use Javascript in order to measure when the user has scrolled down (I've done this using jQuery)
$(window).scroll(function(){
if($(this).scrollTop() > 50){
$('#scroller').removeClass('floating');
$('#scroller').addClass('fixed');
}else{
$('#scroller').addClass('floating');
$('#scroller').removeClass('fixed');
}
});
where you have an alternative css declaration for fixed like
.fixed{
position: fixed;
}

Related

html margin issue - "Shaking" Website

Im working on a Website and everything is ok, except my webside is "shaking". (I'm using chrome)
The margin of my main Container is changing on some sides and i have no idea why. They have the same html code, it must have something to do with the content in the main div-container
My Website: www.anitalernt.de
http://www.anitalernt.de/about-us.html is a bit more to the left and http://www.anitalernt.de/index.html after getting a task (just click some buttons) also.
Has someone a idea?
Always display the scrollbar
html {
overflow-y: scroll;
}
See:
Always show browser scrollbar to prevent page jumping
How to always show the vertical scrollbar in a browser?
You could add
html{ overflow-y: scroll;}
to your css.
Places a permanent (but sometimes empty) scroll bar on the window
The issue is most likely caused by the scrollbar appearing, which reduces the viewable area of the browser window and may adjust the contents accordingly.
There are a couple possible workarounds:
You could extend the length of the adjusted web-page so that the content (post-adjustment) also runs "below the fold"
Alternatively, you could encase everything in an absolute positioned DIV which won't "shake" when the viewable area contracts on the scrollbar's appearance.
Or -- depending on your specific content -- you could disable the scrollbar. Although this last workaround is only advisable in very specific cases.
body{
margin: 0;
}
seems to resolve this without having to add a dummy scrollbar :)
I had the same problem because of jQuery scroll where I was checking the scroll value and using that. I fixed my navigation bar by using addClass and removeClass, adding class was not working because I did not use !important in CSS class.

Mobile Safari prevent body scroll when menu open

I have been fighting with this thing for several weeks now. I just can't figure it out.
I'm trying to prevent horizontal scrolling of the body when the menu is open. Here is a complete jsbin:
http://jsbin.com/vopeq/38/edit
Seems like any solution only undoes other things that are working the way I would like them to. So I added the requirements to the jsbin to keep track of which are satisfied with each version.
UPDATE
Maybe it's too good to be true, but I think I have all requirements satisfied, but I still need to check on android devices:
http://jsbin.com/vopeq/61
The thing I learned, that was tripping me up for so long and I didn't realize it, is that overflow: hidden on the <body> element, in Mobile Safari, doesn't do squat! I had to move my styles to prevent scrolling down one level of elements.
And Ed4 pointed me in the right direction. I needed to set overflow: hidden on the parent of the element I'm moving with left: 85% instead of the element itself (I was trying to do it all on the <body>).
So I have a body > .container, on which I do the overflow: hidden and body > .container > .content, which I push over using position: relative and left: 85%.
Your question is more of a design spec than a question, so rather than try to design the whole layout for you, I'll point out why your jsbin doesn't work.
Don't try to set left on body. If body is protruding offscreen, you're not going to be able to reliably stop scrolling.
Instead, keep body stationary with 100% width and height, so it can serve as your visible window boundary. When you want to lock the scrolling, you can set overflow: hidden on body. Handle the slide-over and scrolling menu with separate divs inside body.

CSS elements seem to overlay when zooming in

I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}

How to position DIVs relatively to the browser window?

I have a PHP page that displays me the content of a conversation and allows me to answer back. As messages are displayed in inverse chronological order (newer messages are showed first), positioning the "Answer" form at the end of the page would look bad and not comfortable to use (one has to scroll between all messages), but positioning it on the top looks bad too, as one cannot read old messages and answer back.
So, I need something like Facebook does for conversations: one can read all messages while the textbox remains at the fixed position. An example may be found here: when entering the page [and waiting a few seconds], an image on the left appears, and follows the browser as you scroll the page.
It sounds like you want the position:fixed CSS property.
HTML:
<textarea class="inputbox"></textarea>
This CSS will put it at the bottom of the page:
.inputbox {
position: fixed;
bottom: 0px;
}
You probably also want to look at top, left, and right.
use can use position:fixed on div and adjust it with top , left or bottom, right or whatever that you want to choose

Is there Anything Close to a Position: Relative-Fixed?

I have a site, elemovements.com, where, on the home page, you can click to view an archive of the news and a little popout appears. I have taken advantage of jQuery Waypoints so that, when scrolling, the popout will follow you down the page. Unfortunately, the way I have it set up, I have its position styled with CSS which works appropriately under the resolution I am using. Unfortunately, not everyone uses 1600x900. My question is (and I know there is no such thing in CSS): is there any way for an element to have fixed positioning relative to another element? In my code, I created a JavaScript object which handles most of the operations for this archive popout called objArchive, and in it, a function called getRight() which I was attempting to use to remedy this situation whenever a person scrolled or resized under suitable conditions. Alas, I could not get it to work. You can take a look at the site here and a majority of the code for it here. Whoever can help, I will definitely give you some credit in the code comments :)
By the way, to open it, look at the right hand side of the title bar for the "Latest News" box and there will be an "Archive" link. Thanks!
When you make an element fixed it positions it relative to the browser window, and only the browser window. However, since your website is centered, you have the center of the window as a constant and can position it relative to that center line. If you give your .sticky class these rules, you will have the position you're looking for.
.sticky {
position: fixed !important;
right: 50% !important;
margin-right: -592px;
}
These rules positions the .sticky element so it's right edge is at the center line of the browser's width, then moves it 592 pixels to the right (which is half of you're containers width + the width of the element).

Categories