I want to get the current top position of .top class div, then i have to add some 20px+.top into the .bottom inline style.
Ex: if .top has top:200px; the .bottom must be changed to top:220px;
funtion(){
var position = $('.top').offset();
$('.bottom').css(position)+20px;
}
.parent
{
position: relative;
}
.child
{
position: absolute;
}
.top
{
top: 100px;
right: 0px;
}
.bottom
{
right: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
<div class="child top">Top</div>
<div class="child bottom">Bottom</div>
</div>
funtion(){
var position= $('.top').offset();
var top= position.top;
var left = position.left;
var newtop = top + 20 + "px";
var newleft = left + 20+ "px";
$('.bottom').css( {
'position': 'absolute', // if require
'left': newleft,
'top': newtop
});
}
This might do the work:
var topPosition = $('.top').offset().top;
$('.bottom').css('top',(topPosition+20)+'px');
You can use the following code snippet for this,
$( '.bottom' ).css( 'top', $('.top').css('top'));
$( '.bottom' ).css( 'top', '+=20px' );
Related
I'm trying to get an image to scroll slower than other elements on a site with the div class slow-image however the JQuery doesn't seem to do anything. Does anyone know why?
CSS:
.slow-image
{
position: absolute;
width: 25vw;
top: 10vw;
margin-left: 60vw;
}
HTML
<div class="slow-image"><img src="..."></div>
JQuery
$(document).ready(function(){
var $win = $(window);
$('slow-image').each(function(){
var scroll_speed = 0.8;
var $this = $(this);
$(window).scroll(function() {
var bgScroll = -(($win.scrollTop() - $this.offset().top)/ scroll_speed);
var bgPosition = 'center '+ bgScroll + 'px';
$this.css({ backgroundPosition: bgPosition });
});
});
});
TEST PAGE
Im trying to have the top of the vertical line of the sidebar to stop at the top nav (example image attached), I tried to add 'top': '20' in the js code and it didnt work. I also tried margin-top: 20px in CSS and that didnt do the trick. Im not sure where I can add 20px height above the sidebar.
JavaScript
$(document).ready(function () {
var length = $('#community-sidebar').height() - $('#community-section-col1').height() + $('#community-sidebar').offset().top;
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('#community-section-col1').height() + 'px';
if (scroll < $('#community-sidebar').offset().top) {
$('#community-section-col1').css({
'position': 'absolute',
'top': '0'
});
} else if (scroll > length) {
$('#community-section-col1').css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$('#community-section-col1').css({
'position': 'fixed',
'top': '0',
'height': height
});
}
});
});
CSS
#community-sidebar {left: -45px; position: absolute; top: -40px; height: 1500px;}
.h-line { border-left: solid black 1px; height: 550px; border-width: thin; width: 1px; left: 189px; position: absolute; top: 0;}
Wrapping the header with a div having height 20px followed with position:fixed for the header.
<div style="height:20px">
<div style="position:fixed">
//your header content
</div>
</div>
Long story short: I'd like to scroll through full-screen divs. Looking at previous question I found this which is quite close to what I need but with some changes.
https://jsfiddle.net/naqk671s/
Instead of having the div #1 fixed and the #2 landing on the top of it, I'd like to have the #1 going up and revealing the #2.
My confidence with jQuery is not so big, so I tried to change some values but I just made it worst. do you think is possible to achieve the result with few changes or should I just start from scratch?
under = function(){
if ($window.scrollTop() < thisPos) {
$this.css({
position: 'absolute',
top: ""
});
setPosition = over;
}
};
over = function(){
if (!($window.scrollTop() < thisPos)){
$this.css({
position: 'fixed',
top: 0
});
setPosition = under;
}
};
To make my self more clear, what I'm trying to achieve is basically the opposite of the fiddle I've posted. If you scroll all the way down and than start to scroll up that will be the effect I'd like to achieve but upside down.
Thanks in advance
Update:
After comment, request became clearer, look these examples...
Pure CSS: https://jsfiddle.net/9k8nfetb/
Reference: https://www.w3schools.com/howto/howto_css_sticky_element.asp
jQuery: https://jsfiddle.net/kajwhnc1/
Reference: multiple divs with fixed position and scrolling
Another jQuery: https://jsfiddle.net/6da3e41f/
Reference: How to make div fixed after you scroll to that div?
Snippet
var one = $('#one').offset().top;
var two = $('#two').offset().top;
var three = $('#three').offset().top;
var four = $('#four').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= 0) {
$('#one').css({
position: 'fixed',
top: '0',
});
} else {
$('#one').css({
position: 'static'
});
}
if (currentScroll >= two) {
$('#two').css({
position: 'fixed',
top: '26px',
});
} else {
$('#two').css({
position: 'static'
});
}
if (currentScroll >= three) {
$('#three').css({
position: 'fixed',
top: '52px',
});
} else {
$('#three').css({
position: 'static'
});
}
if (currentScroll >= four) {
$('#four').css({
position: 'fixed',
top: '78px',
});
} else {
$('#four').css({
position: 'static'
});
}
});
body,
html {
height: 200%;
}
#one,
#two,
#three,
#four {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
}
#one {
top: 0;
background-color: aqua;
}
#two {
top: 100%;
background-color: red;
}
#three {
top: 200%;
background-color: #0a0;
}
#four {
top: 300%;
background-color: #a05;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<body>
<div id="one">ONE</div>
<div id="two">TWO TWO</div>
<div id="three">THREE THREE THREE</div>
<div id="four">FOUR FOUR FOUR FOUR</div>
</body>
I have fixed menu on my site which works without any issue. I have a container(not bootstrap) which will be fixed when makes contact with the static menu. Everything is work as expected except when I re-size the window the container goes to sort of absolute position with 0 top. The style or anything does not mention this explicitly, as it still has position:fixed but what I see is this. I tried most of the questions related to this problem in stackoverflow and other resources but nothing gave me a satisfying answer. Any help? Thanks.
$.fn.extend({
scrollTabs: function() {
var pageTop = parseFloat($(window).scrollTop());
if (elementTop < pageTop + 66) {
$(this).css({
'position': 'fixed',
'top': '66px',
'left': '0',
'right': '0',
'z-index': '9999',
'background': '#ffffff',
'width': '100%',
'padding': '20px 0',
'margin-top': '0'
});
$(this).find('#product-tabs').css({
'max-width': '1300px',
'margin-left': 'auto',
'margin-right': 'auto'
});
} else {
$(this).css({
'position': 'initial',
'margin-top': '-' + elementHeight + 'px'
});
}
}
});
$(window).load(function() {
var scrollElement = $('.box-additional.box-tabs.grid12-12');
elementTop = parseFloat($(scrollElement).offset().top);
var overflowHeight = parseFloat($(window).height()) - 200;
$('.box-additional.box-tabs.grid12-12').attr('id', 'firstElement');
var scrollElement = $('#firstElement');
elementHeight = parseFloat($(scrollElement).outerHeight());
var newEle = $(scrollElement).after($(scrollElement).clone().attr('id', 'newElement'));
var newElement = $('#newElement');
$(scrollElement).css('visibility', 'hidden');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(scrollElement).after(newElement);
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
$(window).resize(function() {
var scrollElement = $('#firstElement');
elementTop = parseFloat($(scrollElement).offset().top);
elementHeight = parseFloat($(scrollElement).outerHeight());
var newElement = $('#newElement');
$(newElement).css('margin-top', '-' + elementHeight + 'px');
$(window).scroll(function() {
$(newElement).scrollTabs();
});
});
.header-container {
background-color: #000;
position: fixed;
width: 100%;
z-index: 99999;
color: #fff;
}
.grid12-12 {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
font-size: 50px;
}
.page-content {
min-height: 1000px;
float: left;
font-size: 72px;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="header-container" id="top">
this is my menu
</div>
<div class="page-content">
this is my page content
<div>
<div class="box-additional box-tabs grid12-12">
this is my container
</div>
jQuery(newElement).css('margin-top', '-' + elementHeight + 'px');
to
jQuery(newElement).css('top', '-' + elementHeight + 'px');
I have an image with a box shadow one it, but when I animate it, the box shadow seems to take on a life of its own, as seen here:
example
It happens the same way in both chrome, firefox, and IE.
I am perplexed and, more importantly at a loss at how to fix it so it looks pretty.
Thanks for any thoughts or answers about to fix this or why it is happening.
html/js:
<div id="sliderPane">
<div id="slider0" class="slider"><img src="1.jpg"/></div>
<div id="slider1" class="slider"><img src="2.jpg"/></div>
<div id="slider2" class="slider"><img src="3.jpg"/></div>
<div id="numSliders">3</div>
</div>
<script type="text/javascript">
var numsliders;
var currentSlider = 0;
var interval;
var slideWidth;
$('#slider0').css('opacity',1);
$(document).ready(function(){
numsliders = parseInt( $('#numSliders').html() );
$('#slider0').css('left', '62px');
$('#slider0').css('height', '200px');
$('#slider0').css('width', '200px');
$('#slider0').css('top', '20px');
$('#slider0').css('opacity', '1');
slideWidth = $('#slider0').width();
});
interval = window.setInterval(nextSlider, 5000);
function nextSlider() {
specificSlider((currentSlider + 1)%numsliders);
}
function specificSlider(sliderNumber){
//alert('oldslide: ' + currentSlider + " new sloide: " + sliderNumber);
window.clearInterval(interval);
// move the next slider on deck
$('#slider' + sliderNumber).css('left', $('#sliderPane').css('width'));
$('#slider' + sliderNumber).css('top', '70px');
$('#slider' + sliderNumber).css('hieght', '100px');
$('#slider' + sliderNumber).css('width', '100px');
//alert('lol');
// move old slide off,
$('#slider' + currentSlider).animate({
left: '-80px',
top: '50px',
hieght: '100px',
width: '100px',
opacity: 0
},900,null);
// new slide on
$('#slider' + sliderNumber).animate({
left: ($('#sliderPane').width() / 2 - slideWidth / 2) + 'px',
height: '200px',
width: '200px',
top: '20px',
opacity: 1
},900,null);
currentSlider = sliderNumber;
interval = window.setInterval(nextSlider, 5000);
}
</script>
css:
#sliderPane{
height: 200px;
position: relative;
overflow: hidden;
background-image: url('sliderBG.png');
background-size: 100% 100%;
padding: 20px 0;
}
.slider{
position: absolute;
opacity: 0;
top: -300px;
box-shadow: 2px 2px 10px 5px rgba(0,0,0,.4);
}
#numSliders{
visibility: hidden;
}
In order for you to accept an answer:
<div id="sliderPane">
<div id="slider0" class="slider"><img src="1.jpg"/></div>
<div id="slider1" class="slider"><img src="2.jpg"/></div>
<div id="slider2" class="slider"><img src="3.jpg"/></div>
<div id="numSliders">3</div>
</div>
<script type="text/javascript">
var numsliders;
var currentSlider = 0;
var interval;
var slideWidth;
$('#slider0').css('opacity',1);
$(document).ready(function(){
numsliders = parseInt( $('#numSliders').html() );
$('#slider0').css('left', '62px');
$('#slider0').css('height', '200px');
$('#slider0').css('width', '200px');
$('#slider0').css('top', '20px');
$('#slider0').css('opacity', '1');
slideWidth = $('#slider0').width();
});
interval = window.setInterval(nextSlider, 5000);
function nextSlider() {
specificSlider((currentSlider + 1)%numsliders);
}
function specificSlider(sliderNumber){
//alert('oldslide: ' + currentSlider + " new sloide: " + sliderNumber);
window.clearInterval(interval);
// move the next slider on deck
$('#slider' + sliderNumber).css('left', $('#sliderPane').css('width'));
$('#slider' + sliderNumber).css('top', '70px');
$('#slider' + sliderNumber).css('height', '100px');
$('#slider' + sliderNumber).css('width', '100px');
//alert('lol');
// move old slide off,
$('#slider' + currentSlider).animate({
left: '-80px',
top: '50px',
height: '100px',
width: '100px',
opacity: 0
},900,null);
// new slide on
$('#slider' + sliderNumber).animate({
left: ($('#sliderPane').width() / 2 - slideWidth / 2) + 'px',
height: '200px',
width: '200px',
top: '20px',
opacity: 1
},900,null);
currentSlider = sliderNumber;
interval = window.setInterval(nextSlider, 5000);
}
</script>