Move div with fixed position if window size changes
Question
How can i do the following: I need a div to change it's position when the page is opened on a narrow screen or browser window size is changed. The fixed div should stay on the same vertical position when the page is scrolled up or down, but i also need it to be lets say 10px away from the largest div(a container for smaller divs, see the picture please). Now when i resize the window the fixed div comes over the div to the right.
So the question is how can i make this fixed div stay on the same position when scrolling the page vertically and make it always be 10px away from the right div? Css class for fixed is:
.fixed{
width:40px;
height:40px;
position:fixed;
bottom:100px;
left:100px;
text-indent:-9999px;
}
In fact i'm trying to implement a "back to top" button, so the fixed div is this button and the largest div is page's content.
Here is what i have now:
3 answers
solution1
3 ACCPTED 2012-12-19 17:35:27
change your css to make it look like this:
.fixed{
width:40px;
height:40px;
position:fixed;
bottom:100px;
left:50%;
margin-left: -[(maincontainerwidth/2) + 50];
text-indent:-9999px;
}
solution2
2 2012-12-19 17:13:52
Two ways I would do it:
1) custom javascript that reads the width of window and changes your css
2) or using a library like adapt.js to detect and swap between .css
Key term: Responsive Web Design
Take a look at adapt.js its a javascript library that will load different css files based on page window size. This technique is great if you want to display things different between lets say mobile and desktop screen.
In your scenario this would potentially work also.
1) Reference adapt.js
<script src="/js/adapt.js" type="text/javascript></script>
2) Configure
So essentially you'd have two views:
// Edit to suit your needs.
var ADAPT_CONFIG = {
// Where is your CSS?
path: 'assets/css/',
// false = Only run once, when page first loads.
// true = Change on window resize and page tilt.
dynamic: true,
// Optional callback... myCallback(i, width)
callback: myCallback,
// First range entry is the minimum.
// Last range entry is the maximum.
// Separate ranges by "to" keyword.
range: [
'0px to 760px = Narrow.css', // css for narrow views
'760px to 980px = Narrow.css',
'980px to 1280px = Wide.css', // css for wide views
'1280px to 1600px = Wide.css',
'1600px to 1920px = Wide.css',
'1940px to 2540px = Wide.css',
'2540px = Wide.css'
]
};
3) Altogether would look like
<html>
<head>
...
<script src="/js/adapt.js" type="text/javascript></script>
<script type="text/javascript>
// Edit to suit your needs.
var ADAPT_CONFIG = {
// Where is your CSS?
path: 'assets/css/',
// false = Only run once, when page first loads.
// true = Change on window resize and page tilt.
dynamic: true,
// Optional callback... myCallback(i, width)
callback: myCallback,
// First range entry is the minimum.
// Last range entry is the maximum.
// Separate ranges by "to" keyword.
range: [
'0px to 760px = Narrow.css', // css for narrow views
'760px to 980px = Narrow.css',
'980px to 1280px = Wide.css', // css for wide views
'1280px to 1600px = Wide.css',
'1600px to 1920px = Wide.css',
'1940px to 2540px = Wide.css',
'2540px = Wide.css'
]
};
</script>
...
</head>
<body>
...
</body>
</html>
solution3
0 2012-12-19 17:09:37
Wrapper!
I guess the best way to control this is by using a wrapper div . So, have something like this:
<div class="wrap">
<!-- Contents -->
<div class="fixed">
</div>
</div>
Now add with the CSS:
.wrap {width: [fixed width]; position: relative;}
.fixed {left: -100px;}
I feel the wrapper div is not necessary as the body itself is relative ly position ed. Using this method, the div stays in the same position.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.