I'm kinda new to creating websites, so bear with me.
I just started a new project and I wanted a menu that follows when you scroll, and then stops when it reaches the top of the page. I found a really cool JavaScript plugin called "StickyPanel" ( https://code.google.com/p/sticky-panel/ ), but it won't cooperate. Apparently there are no instructions and I can't find any useful info else where.
The code is very simple:
<script src="js/jquery.js"></script>
<script src="js/jquery.stickyPanel.min.js"></script>
<!-----Sticky Panel------>
<script type="text/javascript">
$().ready(function () {
var stickyPanelOptions = {
afterDetachCSSClass: "",
savePanelSpace: true
};
$("header").stickyPanel(stickyPanelOptions);
});
</script>
<script>
$(document).ready(function(){
$(".nav-button").click(function () {
$(".nav-button,.menu").toggleClass("open");
});
});
</script>
<!-----Sticky Panel------>
Then I made a div class called "header" and then styled the header-menu. I can't get the JavaScript to do anything with my header. What am I doing wrong?
$("header").stickyPanel(stickyPanelOptions);
You ask Jquery for the elemet header
You need to ask jquery the class header =>
$(".header").stickyPanel(stickyPanelOptions);
Read about slectors its usefull!
<header> is a html5 element, support by almost all browser but dont forget display: block in css!
select your div using $(".header") Instead of $("header")
There is another way to it if you don't want to use this plugin. found this code somewhere on internet. it uses position:fixed css style, simple js
javascript
<script type="text/javascript">
window.onload = function () {
$(window).scroll(function () {
var e = $("#StickyPanel");
if (document.documentElement.scrollTop >= 602 || window.pageYOffset >= 602) {
if ($.browser.msie && $.browser.version == "6.0")
{
e.css("top", document.documentElement.scrollTop + 15 + "px") }
else {
e.css({ position: "fixed", top: "1%" }) } }
else if (document.documentElement.scrollTop < 602 || window.pageYOffset < 602)
{
e.css({ position: "absolute", top: "91%" }) } }) }
</script>
css
#search
{
position: absolute;
top: 91%;
}
just change the values
602
according to your needs
Hope it helps.
This is what you are asking for:
JSFIDDLE
jsfiddle demo
Related
I'm working on a project that animate on page scroll.
This is the element I want to animate.
<h1 style="position: relative; top: 0; left: 0;"
onscroll="animateAfterPosition(200)"
data-animate-left="50px" data-animate-top="50px"
data-animate-time="0.2s">Animation on scroll</h1>
This is my JavaScript
function animateAfterPosition(scroll) {
console.log(scroll);
function(){
if (window.scrollY <= scroll) {
this.classList.add('animateAfterPosition');
} else {
this.classList.remove('animateAfterPosition');
}}
And this is my CSS
.animateAfterPosition {
transition: attr(data-animate-time);
left: attr(data-animate-left);
top: attr(data-animate-top);}
I need to run the function animateAfterPosition from the html. I expected to run the function with onscroll event, but it doesn't work. So how can I do this?
Edit
I found that css attr() is only working with the content: property and I managed to do it with JavaScript
You need to add selector to toggle class the animation. And your current css doesn't have enough height to make scrolling window. Here's an simple snippet to run your function onload, update onscroll and toggling class.
var dataAnimate = document.querySelector('[data-animate]');
function animateAfterPosition(scroll) {
dataAnimate.classList.toggle('active', window.scrollY <= scroll);
}
window.addEventListener("scroll", function() {
return animateAfterPosition(200);
});
.animateAfterPosition {
transition: attr(data-animate-time);
left: attr(data-animate-left);
top: attr(data-animate-top);
}
[data-animate] {
height: 1000px;
}
<body onload="animateAfterPosition(200)">
<h1 style="position: relative; top: 0; left: 0;"data-animate-left="50px" data-animate-top="50px" data-animate-time="0.2s" data-animate>Animation on scroll</h1>
</body>
Fiddle: https://jsfiddle.net/rafonzoo/phmg0u46/
A minimalistic solution
You can configure it using the first 4 variables in the function. I recommend adding the indicator class to the body itself and then use a selector like body.beyond-that-point h1. This way, it's possible to make several tags behave differently as the scrolling happens.
You can test it here
This version uses a fancier effect but the logic behind is the same.
https://deneskellner.com/stackoverflow-examples/62623588/index.html
<!doctype html>
<html>
<style>
body.beyond-that-point {background:silver;}
div.text {padding:75vh 0px;text-align:center;}
</style>
<body>
<div class="text">
Scroll me down and the background will change
</div>
<script>
setTimeout(function() {
var amount = 100; // how many pixels before the miracle happens
var beyondClass = 'beyond-that-point'; // this class will be added
var targetSelector = 'body'; // which element to add the class to
var checkMS = 20; // check scroll position every N milliseconds
var eClass = document.querySelector(targetSelector).classList;
setInterval(function() {
var y = window.scrollY;
var c = beyondClass;
var isBeyond = !!(y>=amount)?1:0;
if(isBeyond==1) if(!eClass.contains(c)) eClass.add(c);
if(isBeyond==0) if( eClass.contains(c)) eClass.remove(c);
},checkMS);
},1);
</script>
</body>
</html>
Note: there are better ways to check DOM readiness but for simplicity I used setTimeout here. Feel free to change it.
I am trying to make it so that a div fades out once you have scrolled down the page. Im using this fiddle which works, however I cannot get it to work when I load it into a single wordpress page.
I tried adding the following in the text editor:
<div class="bottomMenu"></div>
<script type="text/javascript">
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
</script>
The div shows (I haven't included the CSS here), however I cannot get the JS working. sorry if this has been asked before, but I couldn't find an exact answer on the best way to do it in WP.
Add jQuery library:
<div class="bottomMenu"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
</script>
So I am trying to make a nav bar which is hidden when you first load the page and displays when you scroll down to the second section, I have got it working but when you scroll up and down within the home section, the nav bar keeps appearing and disappearing again when it should stay out of sight.
Live Demo: http://zimxtrial.ukbigbuy.com/
JS:
<script type="text/javascript">
jQuery(document).ready(function() {
var startY= jQuery('#home').position().top + jQuery('#home').outerHeight();
jQuery('#nav-container').html( jQuery('#nav').html());
jQuery(window).scroll(function () {
if(jQuery(this).scrollTop() > startY ){
jQuery('#nav-container').slideDown();
}else{
$('#nav-container').css({display: 'block'});
jQuery('#nav-container').slideUp();
}
});
});
</script>
CSS:
#nav-container {
position: fixed;
height: 50px;
width: 100%;
min-width: 600px;
display: none;
}
Any help would be greatly appreciated, thanks guys.
Also, this is my first time messing around with JQuery and JS so be kind.
Final version after fix:
<script type="text/javascript">
$(document).ready(function() {
var startY= $('#home').position().top + $('#home').outerHeight();
var navc = $('#nav-container')
navc.html( $('#nav').html());
$(window).scroll(function () {
if($(this).scrollTop() > startY ){
navc.slideDown();
}else{
navc.slideUp();
}
});
});
</script>
Because you are inside the .scroll() function which gets fired everytime the page is scrolled, it will be going to your else condition and displaying the navbar each time because of this line:
$('#nav-container').css({display: 'block'});
Remove this line and it should work as expected.
You would need to check if the navBar is show or not and depending on that run the scroll() function only if the state is the correct one. Something like this:
if(jQuery(this).scrollTop() > startY && $("#nav-container").css('display') == "none" ){
jQuery('#nav-container').slideDown();
}else if( && $("#nav-container").css('display') == "block"){
$('#nav-container').css({display: 'block'});
jQuery('#nav-container').slideUp();
}
I have scrolling a menu on my website http://www.whirlware.biz, it works fine at all but have a bug in submenus (company and services), submenu appears strange way when page is scrolled. I think I need fixed position for submenu, but when I try to make it I had awful results.
My code: (or you can inspect my website)
stickymenu.js
$( document ).ready(function() {
var left = document.getElementById("zt-mainmenu");
stop = (left.offsetTop - 60);
window.onscroll = function (e) {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
if (scrollTop >= stop) {
left.className = 'fixed_m';
} else {
left.className = '';
}
}
});
I tried to add this css but there was no result that I expected:
div.submenu-wrap {
position:fixed !important;
top:0px !important;
left:0px !important;
}
I can`t provide whole css code because style file is big, but if you expect site I think you can find right answer.
Can somebody help me with this? Thanks.
You have a top property that the js plugin is inserting. Either edit the plugin to remove the top property inline, or use this bit of CSS on an existing selector you have:
div.menusys_mega .menusub_mega {
position: absolute;
opacity: 0;
top: inherit !important;
}
It's not ideal because of the !important, but at least you will see what happens when you cancel out the top property.
This code:
$('#ad img').each(function(){
if($(this).width() > 125){
$(this).height('auto');
$(this).width(125);
}
});
is working properly on Firefox but not Chrome. The img tags inside of #ad are constricted by height, but if this makes them too wide I need to restrain the width. Is there a better way to do this that would work on all browsers?
The html for the image is as follows:
<img src='http://easyuniv.com/img/ads/".$ad['img']."' height='40px'>
You could achieve this without javascript.
Use this in the css :
#ad img {
width: 125px;
height: auto;
overflow: hidden;
}
I suspect what is biting you is the variability in image load. If the image itself hasn't loaded by the time your code runs, it will have width of 0. You might want to try using a load handler as well as running your existing code to ensure that the images are sized properly. Note: you'll need to use your existing code to handle the case where the image is loaded before the load handler is added.
$(function() {
$('#ad img').on('load', function() {
resize(this);
}).each( function() {
resize(this);
});
function resize(image) {
var $image = $(image);
if ($image.width() > 125) {
$image.css( { height: 'auto', width: 125 } );
}
}
});
Try:
$(window).load(function () {
$('#ad img').each(function(){
if($(this).width() > 125){
$(this).height('auto');
$(this).width(125);
}
});
});
Did you try:
$('#ad img').each(function(){
if($(this).width() > 125) {
$(this).css('height', 'auto');
$(this).css('width',125);
}
})