Develop Reference

Vue.js style working on wrong element

It's really strange.
I'm making floating sidebar in the Vue component, so need to change the css position value between fixed and relative.
so what I did is giving an ID for the sidebar element, and on scroll event, check the position on the page and changed some css values.
Here is my code.
created() {
document.addEventListener('scroll', this.handleScroll);
},
destroyed() {
document.addEventListener('scroll', this.handleScroll);
}
/* ... */
handleScroll(e) {
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
var originWidth = $("#fields-to-move").width() + 2;
if(this.screen_no == 2){
if (280 <= top) {
document.getElementById("fields-to-move").style.position = "fixed";
document.getElementById("fields-to-move").style.top = 10 + 'px' ;
document.getElementById("fields-to-move").style.width = originWidth + 'px';
} else {
document.getElementById("fields-to-move").style.position = "relative";
document.getElementById("fields-to-move").style.top = 'auto' ;
document.getElementById("fields-to-move").style.width = originWidth + 'px';
}
}
}
"fields-to-move" is the ID of DOM element I'm going to change css.
It's working well.
But the problem is that above css ( position: fixed, top:10px and width) also applied on other element without the ID.
There's one thing more need to mention.
The element with the ID is a child element of another one which is mounted with v-if condition.
After the parent element dismounted, the css is applied to the wrong element that's mounted after it.
I'm not sure my explanation is enough. Please let me know if you have any questions above my problem.
Thanks in advance.

If you can provide separeted example in jsfiddle it would be easier to help...
But I belive that this behaviour can caused by some Vue optimizations described here: documentation
edit:
Try to execute entire logic of "handleScroll" in vues nextTick.

How to make an element become fixed when 50px from the top of the screen

I have a html div element that scrolls with the page but I would like it to become fixed once it reaches 50px from the top of the screen...
How is this done?
My div id is #box
Thanks!
-Ina

If you want it to be fixed at the top of the page at some distance from the top, you can check the top offset of the element and change the class when it reach the distance you want.
Here is the jquery code for your reference
jQuery(document).scroll(function() {
var documentTop = jQuery(document).scrollTop();
console.log('this is current top of your document' + documentTop );
//box top is 891
if (documentTop > 841) {
//change the value of the css at this point
jQuery("#box").addClass("stayfix");
}
else
{
jQuery("#box").removeClass("stayfix");
}
});
You need to be more specific about what have you done so far. For eg, how did you make the div element to scrolls inside the page. using css or js/jquery animation features?That will help us to give more specific answer.
**Edited According to your fiddle.

They are right, this question is duplicate. Here is a code I made with answers from the forum.
var box_top = $("#box").offset().top;
$(window).scroll(function (event) {
if ($(window).scrollTop() >= (box_top - 50)) {
$("#box").css({position:"fixed",top:"50px"});
} else {
$("#box").css({position:"relative"});
}
});
Hope it helps anyway.
https://jsfiddle.net/ay54msd5/1/

Try something like this. It's a solution using jquery (hopefully not a problem) that checks the scrollHeight of the page every time the page scrolls. If the scrollHeight is greater than a certain threshold, the element becomes fixed. If not, the element is positioned relatively (but you can do whatever you want in that case.
$(document).ready(function() {
var navFixed = false;
var $box = $("#box");
var topHeight = 50;
$(document).scroll(function() {
if ($(document).scrollTop() >= topHeight && !navFixed) {
$box.css("position", "fixed");
navFixed = true;
}
else if ($(document).scrollTop() < topHeight && navFixed) {
$box.css("position", "relative");
navFixed = false;
}
});
});
You would have to write some additional CSS targeting the #box element that tells it what coordinates you'd like it to be fixed to.

Remove class if other class present at scroll height

I need to hide an element on scroll - but only if its not already hidden.
I've written the following jQuery but it's not working for some reason - any tips please?
The css class open-style-switcher and close-style-switcher determine a css scroll anim. I want to wait until the page has scrolled to a certain height, then auto hide the search box if it contains the open class.
Where am I going wrong!?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$('#search-box').hasClass('open-style-switcher').toggleClass("open-style-switcher", "close-style-switcher", 1000);
}
});

"toggleClass" can receive two classes separated by space
Also creating "$searchBox" variable to avoid double search in DOM.
And as was told before: hasClass() returns boolean
Here it is:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
var $searchBox = $('#search-box');
if ($searchBox.hasClass('open-style-switcher'))
{
$searchBox.toggleClass("open-style-switcher close-style-switcher", 1000);
}
}
});

.hasClass() - Returns: Boolean determines whether any of the matched elements are assigned the given class.
In your scenario, addClass and removeClass is more suitable.
See below :
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var searchbox = $('#search-box');
if (scroll >= 500 && searchbox.hasClass('open-style-switcher')) {
searchbox.removeClass("open-style-switcher");
searchbox.addClass("close-style-switcher", 1000);
}
});

toggleClass() does not work in the way you, or even the other answers, think it does. It only adds and removes classes, not exchange them for others. See toggleClass() documentation here.
if (scroll >= 500) {
if($('#search-box').hasClass('open-style-switcher'))
{
$('#search-box').removeClass("open-style-switcher");
$('#search-box').addClass("close-style-switcher");
}
}
I imagine you will also want an else block that does the inverse of this. Perhaps the below is a more straight forward way of doing what you want to achieve as there may not be any point in the check to see if the #search-box already has the open-style-switcher class.
if (scroll >= 500) {
$('#search-box').removeClass("open-style-switcher").addClass("close-style-switcher");
}
else
{
$('#search-box').removeClass("close-style-switcher").addClass("open-style-switcher");
}

How might I tell if an HTML element is being rendered on the screen?

I'd like an element to do a CSS3 animation once the page is scrolled down enough for it to be visible, and I'm wondering if there's any way to accomplish this. Anything involving JavaScript or CSS would work. I've done many Google searches and Stackoverflow searches and can't find exactly what I need.

Depending on the complexity of your layout, it could be as simple as finding the scroll position, the height of the window, and where the element is on the page.
function scrollEvent() {
var el = document.getElementsByTagName('a')[0];
var body = document.getElementsByTagName('body')[0];
var posY = (window.innerHeight + body.scrollTop) - el.offsetTop;
var onScreen = (posY > 0 && posY < window.innerHeight) ? true : false;
}
window.onscroll = scrollEvent;
Use the same technique if you're worried about horizontal positioning, as well.

It depends on what you want to do specifically. I would look at these resources:
http://daneden.github.io/animate.css/
http://www.w3schools.com/css/css3_animations.asp
http://css-tricks.com/almanac/properties/a/animation/

Put your CSS3 animation style in a class, but don't assign it to your element until it has been scrolled completely into view.
Assuming your element has an id of sprite, this should get you going:
<style>
.animate {
//CSS3 animation style
}
</style>
window.onscroll= function() {
var sprite = document.getElementById('sprite');
if(sprite.getBoundingClientRect().top>=0 && sprite.getBoundingClientRect().bottom<=window.innerHeight) {
sprite.className= 'animate';
}
}

Banner position off upon window resize with sticky nav

I've encountered an issue with a sticky nav/banner image duo I'm trying to implement.
Check it out here: http://lucid-build.com/stack/sticky/
The issue is, when I resize the window, the position of the banner is off. Otherwise, it acts as it's supposed to.
Any suggestions on how to fix this would be greatly appreciated!
[edit] here's the script!
function resizeBanner() {
var bannerH = $(".banner img").height();
$(".banner").css("height", bannerH);
}
function fixedNav() {
var logoT = $(".logo").offset().top;
var bannerH = $(".banner img").height();
$(window).scroll(function() {
if($(window).scrollTop() > logoT ) {
$("#header").addClass("fixed").css(("height"),120);
$(".banner").css(("margin-top"),-bannerH+120);
$("body").css(("margin-top"),bannerH+18);
} else {
$("#header").removeClass("fixed").css(("height"),("auto"));
$(".banner").css(("margin-top"),0);
$("body").css(("margin-top"),0);
}
});
}
$(window).resize(function() {
resizeBanner();
});
$(window).load(function() {
resizeBanner();
fixedNav();
});
$(document).ready(function() {
resizeBanner();
});

You just have to add to your element's css that has the class "banner" :
position : absolute;
bottom : 0;
PS : actually your box is resizing right but it set in the top left by default of the header that you set. As the parent box is set on position : relative, all the absolute element in will refer to that parent and not to the full document.