When I scroll up or down, I want a box/div to move up or down too.
For example:
See categories box
in your css write
#my-box {
position: fixed;
}
it will probably move it from the center so you will have to do some math if it is a fixed width and height box like
#my-box-fixed {
position: fixed;
width:200px;
height: 150px;
top: 50%;
left: 50%;
margin-left: -100px; // half of the width
margin-top: -75px; // half of the height
}
This is all you need: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html
Also, in javascript you can do:
document.getElementById("my-box-fixed").style.position = "fixed";
you can do it whit jquery:
$().ready(function () {
var $scrollingDiv = $("#YouDivID");
$(window).scroll(function () {
$scrollingDiv
.stop()
.animate({ "marginTop": ($(window).scrollTop() + 5) + "px" }, "1000");
});
});
Related
I have a problem with a script that until recently worked, but now seems not to want to work.
I want to reduce the opacity of the green spheres when scrolling down, it seems to be working until recently, but now I can't figure out what the problem is.
The website is this: https://attiliosantomo.com/PROVA/
The script is this:
$(document).ready(function() {
$(window).scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1300);
if (opacity > 0.2) {
$('.bg-bubble').css('opacity', opacity);
}
});
});
</script>
Thank you so much for you help
The issue is that it's not the window that is scrolling. It's the .main-desktop element that is being scrolled. Targeting the scroll event of the .main-desktop as per below should solve the issue.
$(document).ready(function() {
// \/ Changed \/ selector from window to '.main-desktop'
$('.main-desktop').scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1300);
if (opacity > 0.2) {
$('.bg-bubble').css('opacity', opacity);
}
});
});
html,
body {
height: 100%;
margin: 0;
}
.main-desktop {
overflow: scroll;
height: 100%;
}
.inner {
height: 3000px;
}
.bg-bubble {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg-bubble"></div>
<div class="main-desktop">
<div class="inner"></div>
</div>
I have an image in the center of my webpage. Once the user scrolls and the image hits the top of the window, I am attempting to fix the image to the top of the page so that it scrolls with the page.
However, instead of it sticking when it hits the top of the window, the image is currently jumping to the top of the page as soon as the user scrolls. Although I would like the image to stay fixed at the top while the user is on the page, it stays fixed when the page is refreshed!
Can't seem to figure this out - please help!
index.html
<img src="./assets/img/logo.png" class="logo" alt="Logo">
style.css
.logo {
width: 500px;
display: block;
position: absolute;
top: 200px;
left: 0;
right: 0;
margin: auto;
}
main.js
$(function() {
var boxInitialTop = $('.logo').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > boxInitialTop) {
$('.logo').css({position: 'fixed', top: '0px'});
} else {
$('.logo').css({position: 'absolute'});
}
});
});
I think all you need to do is reset the initial top value when you scroll back down:
var boxInitialTop = $('.logo').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > boxInitialTop) {
$('.logo').css({
position: 'fixed',
top: '0px'
});
} else {
$('.logo').css({
position: 'absolute',
top: '200px' // add this to "reset" the top to it's original (that you set in your css)
});
}
});
body {height:2000px;}
#test {
height: 400px;
position: relative;
}
.logo {
width: 500px;
display: block;
position: absolute;
top: 200px;
left: 0;
right: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
<img src="http://lorempixel.com/400/200/city/" class="logo" alt="Logo">
</div>
your code works.
you only have to reset the top value in the else section.
This way it stays 0px because it was set this way in the if section.
You need to put the original placement of the element back to where it started (after the else). Once the element returns to position:absolute you need to ensure that it's top property is returned back to 200px otherwise it will still hold the value that was set when it was fixed i.e. 0.
See below:
$(function() {
var boxInitialTop = $('.logo').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > boxInitialTop) {
$('.logo').css({position: 'fixed', top: '0px'});
} else {
$('.logo').css({position: 'absolute', top : boxInitialTop+'px'});
}
});
});
$ ( function () {
var boxInitialTop = $ ( '.logo' ). offset (). top ;
$ ( window ). scroll ( function () {
if ( $ ( window ). scrollTop () > boxInitialTop ) {
$ ( '.logo' ). css ({ position : 'relative' , top : '0px' });
} else {
$ ( '.logo' ). css ({ position : 'absolute' });
}
});
});
What I'd like to do is animate a small image as well as a div (or an image within a div) from the right to the left of the screen, repeating once the image/div leaves the screen.
I found an example online that moves an image/div from left to right, but not all the way to the other side of the screen, and I am struggling to make it from right to left.
Here's what I have been doing
function moveTruck() {
$("#ImageToMove").animate({
"margin-right": "5000px"
}, 3000, function () { $("#ImageToMove").css("margin-right", "10000"); moveTruck(); });
}
moveTruck();
Playing with the margin-right values. My CSS class is:
.HomeImageAnimate{
position:absolute;
margin-top:80px;
right:1000px;
}
Try setting , animating left property using values of window.innerWidth , container element width
(function fx(el) {
$(el).css("left", window.innerWidth)
.animate({
left: "-" + (window.innerWidth - $(el).width() * 2)
}, 3000, "linear", function() {
fx(this)
})
}($("div")))
body {
overflow: hidden;
}
div {
width: 50px;
height: 50px;
position: absolute;
}
img {
background: gold;
width: 50px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div>
<img />
</div>
Try this out, this truck div repeatedly goes from right to left.
HTML:
<div class="truck"></div>
CSS:
body{
background: green;
overflow: hidden;
}
.truck {
margin-top:20px;
width: 272px;
height: 174px;
cursor:pointer;
position: absolute;
margin-right: -150px;
z-index: 3;
background: red;
border-radius:4px;
width:200px;
height:50px;
}
JS:
$(function() {
var moveTruck = function(){
$(".truck").delay(2000).animate( {'right': '120%' }, 5000,'linear',function(){
$(this).css({'right': '-50px'});
moveTruck();
});
}
moveTruck();
})
CODEPEN DEMO
function move(){
width = $(window).width();
objectWidth = $('#demo').width();
margin = width + objectWidth + 'px';
restart = -100 - objectWidth + 'px';
$('#demo').animate({
'margin-left': margin
}, 3000, function(){
$('#demo').css('margin-left', restart);
move();
});
}
move();
Try this out, it calculates the exact width of object and window - should always work no matter the screen size. You were trying to use an absolute pixel value, won't always work.
https://jsfiddle.net/w9pgmm9d/3/
So I'm currently working on a project and have the correct code for sticking the menu bar to the top once it has been scrolled passed. However, when the menu bar is not 100% of the page, it crunches to the left. Anyone have a clue how to put it right back to where it was?
HTML CODE:
<div class="menucontainer">
<ul class="menu">
<li>Home</li>
<li>History</li>
<li>Gallery</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
<div id="stickyalias"></div>
jQuery CODE:
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('.menucontainer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('.menucontainer').css({ position: 'fixed', top: '0px' });
$('#stickyalias').css('display', 'block');
} else {
$('.menucontainer').css({ position: 'static', top: '0px' });
$('#stickyalias').css('display', 'none');
}
});
});
Some CSS code:
.menucontainer {
height: 50px;
line-height: 50px;
clear: both;
z-index: 9999;
opacity: .9;
margin-left: auto;
margin-right: auto;
width: 1100px;
}
If it helps anyone at all, the page can be visited at mor.actiongymok.com to see the live version of it running.
This is the expected behaviour of a fixed element... If you haven't specified a left value it will default to left:0;. So to center it, give it:
left: 50%;
margin-left: -550px; // half the width of your header
You will have to adjust this as necessary across breakpoints but that is why your nav is jumping over like that.
I think your menu has a fixed width. When your menu sticks to the top, change the width of the class .menucontainer to 100%.
If you want that your menu remains from the same size, add the following CSS to your .menucontainer
.menucontainer{
left: 0;
right: 0;
}
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('.menucontainer').offset().top;
var menuContainerWidth =$('.menucontainer').outerWidth();
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('.menucontainer').css({ position: 'fixed', top: '0px',left:'50%',marginLeft:menuContainerWidth/2 + 'px'});
$('#stickyalias').css('display', 'block');
} else {
$('.menucontainer').css({ position: 'static', top: '0px',left:'auto',marginLeft:'0px' });
$('#stickyalias').css('display', 'none');
}
});
});
I would suggest using bootstrap3. It should come built into Visual Studio. It makes it so much easier using their pre built css.
I have a header on a website that is fixed 20px from the top of the page.
However, I want this to catch the top of the page when scrolling and become fixed to the top of the screen once the user has scrolled that 20px down.
CSS
#header{
padding: 0px 0px 0px 0px;
background: url(../images/header-fill2.jpg) repeat-x top;
position: fixed;
height: 60px;
width: 100%;
top: 20px;
z-index: 5000;
}
I imagine some form of JavaScript is required but have little to no JavaScript experience, so any help would be greatly appreciated.
Just listen for the scroll event and read the value of $(window).scrollTop() and set the top according to that.
Something like:
$(window).on('scroll', function() {
$('#header').css('top', $(window).scrollTop() > 20 ? '0px' : '20px');
});
Example on jsFiddle
The scroll event tells you when the window scrolls. Then, use the scrollTop to find out how much closer to 0 to go:
$(window).on("scroll", function() {
$("#header").css("top", Math.max(0, 20 - $(window).scrollTop()));
});
Live Example
Or to avoid constantly re-creating objects:
(function() {
var $wnd = $(window),
$header = $("#header");
$wnd.on("scroll", function() {
$header.css("top", Math.max(0, 20 - $wnd.scrollTop()));
});
})();
Live Example
Thats how I do that with jQuery.
The position is also cached, for performance reasons:
Here is a fiddle:
http://jsfiddle.net/StephanWagner/u3yrS/
$(document).ready(function() {
var cfixed_nav = false, wscroll;
var setScroll = function() {
wscroll = $(window).scrollTop();
var fixed_nav = wscroll > 20; // Set pixel amount here
if (fixed_nav != cfixed_nav) {
$('body')[fixed_nav ? 'addClass' : 'removeClass']('fixed');
cfixed_nav = fixed_nav;
}
};
setScroll();
$(document).scroll(setScroll);
});
With CSS you set the fixed position:
.fixed #header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%
}
Also remember, that when the header gets the fixed position, those 20px of the header are missing. So you can add a body padding for example:
.fixed {
padding-top: 20px;
}
Or you add an element with 20 Pixel height and swap display none / block depending on the .fixed class in the body