Below is my code and I'm trying to recreate this effect: (http://hideo-html5-css3-bootstrap-website-template.little-neko.com/files/index.html) [When you scroll down the navigaiton bar changes to half size and with some transparency or something like that.] Any ideas to remake it?
Code: http://pastebin.com/r0pS4AYD
Ps: My code has nothing special and I just want a point/direction to make it.
When the user scolls to an specific position, or in your case when he begins to scroll, you can add an class via jQuery.
Look here for more information:
Leave menu bar fixed on top when scrolled
(Code is taken from the post in the link)
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
}
else {
$('.menu').removeClass('fixed');
}
});
it is the best when you create an fiddle with your code, so other people can easy modify your code and see whats going on there..
Related
I'm a pure student's beginner, right now I'm trying to create an adaptive menu for my project, but I need to change the color of my background because white on white is a little bit problematic.
What I tried is to create a script in order to add a class 'scroll' to my 'nav' when I'm scrolling down, and removed it when I'm going back to the top.
But as I said I'm a beginner, and it seems I did something wrong with either my script or my CSS.
Can you help me to understand how where I did something wrong?
Thanks for the help !
PS: Sorry for my english I did my best.
`https://codepen.io/Raz7/pen/zYKoJzY`
it's completly messed up, probably due to all the image I put in.
In your script tag you are using a JQuery Selector "$" but you did not add the JQuery library.
To keep things simple I will use the built-in querySelector from the document object and Vanilla Javascript.
The following code will do what you want:
let timeout;
window.addEventListener('scroll', function (e) {
// If there's a timer, cancel it
if (timeout) {
window.cancelAnimationFrame(timeout);
}
// Setup the new requestAnimationFrame()
timeout = window.requestAnimationFrame(function () {
// Run our scroll functions
let nav = document.querySelector('nav');
if (document.querySelector('header').getBoundingClientRect().top !== 0) {
nav.classList.add('scroll');
} else {
nav.classList.remove('scroll');
}
});
}, false);
To actually know what the distance to the top is you need a point of reference, in this script I used the header element as a point of reference since the header is relative to the body tag. If the header distance to top is not 0 then add the scroll class to the nav element else remove it. You can see also a timeout and requestAnimationFrame, this helps de-bouncing the scroll event.
Instead of using the JQuery Library, if you are a beginner I suggest learning about Vanilla Javascript and the DOM.
https://www.w3schools.com/js/js_htmldom.asp
I want to give to the header-body the effect like in this site preview.oklerthemes.com/?theme=Porto
Use a relative position (to show the scroll)...and the use the fixed.. but when I put the fixed position I see that this come to the original position AND THEN come up. --> https://jsfiddle.net/uxhgpz6e/2/
enter
So, i'd like to avoid this "jump effect", but still use the relative+fixed.
Change your scroll value and it should get the behaviour you want : See this fiddle
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$('.header-body').css('position','fixed').css('top','-100px');
} else {
$('.header-body').css('position','relative').css('top','0');
}
});
There is probably an answer for this but I have no idea of the terminology I would search for unfortunately!
Basically, there is a button on my Wordpress website at the top right which when clicked, pulls down a form to fill out. What's the easiest way of creating a button further down the page which would open that pulldown and take the user up there, presumably with an anchor? Simple HTML/CSS would be ideal because A: I can create a text box in the page layout creator and just paste the code in there and B: My coding knowledge is quite limited!
The website is www.harringtonsproperty.co.uk. The button in question is the BOOK A VALUATION at the top right.
Thank you!
This cannot be done with CSS alone. You need to use JavaScript.
Currently, the 'click' event is described at the top of the custom.js file. You'll need to add an additional JS function into this file to achieve what you want. For starters/example:
jQuery('button#contactToggle2').click(function(e){
e.preventDefault();
if( jQuery('#contactSlide').css('display') == 'block' ) {
jQuery('#contactSlide').slideUp(500);
} else {
jQuery('#contactSlide').slideDown(500);
// Handle scroll to top
jQuery('html, body').animate({scrollTop : 0},800);
}
})
You'll then need to give your new button an id="contactToggle2" in order for this to work. Again, this is just an example.
I'm making a simple WordPress theme and I wanted to include a jQuery Sidr into and I got that done properly, however the menu icon that pulls the slide-in sidebar disappears behind the sidebar leaving the user with no way to collapse the sidebar again.
The theme is far from complete (and I was working on it using an offline WP setup) but I put it up here temporarily for the sake of this question: http://sweven.vhbelvadi.com
The menu icon in question is on the top-right. I have given it top and right properties, floated it right, as well as given it a fixed position to make it stay there.
As I said, the design is far from complete, so take no notice of it, but once you click on the icon to slide out the sidebar area, the menu icon disappears.
I have tried giving it a z-index which works, putting the menu button on top and makes it accessible, but you cannot see it on the link above because I removed it; didn't like the look of it.
Basically, I'd like to know if there's any way of changing the attribute (focus, active don't seem to work) or do anything else so once the sidebar opens the menu icon slides out alongside it.
What is my solution?
Thanks.
Update:
Right now I'm using the following code at the link above:
$(document).ready(function(){
$('span.genericon').on('click', function(){
$('#simple-menu').sidr({side: "right"});
$('span.genericon').css({
right: "6.5em"
}, 500);
});
});
It works, but how would I return the menu icon to its original place?
The collapse button is there but when the sidebar opens, the button goes behind it, so you need to change the CSS based on whether sidebar is visible or hidden, so use a kind of toggle like below.
$('button').toggle(
function() {
$('#B').css('left', '0')
}, function() {
$('#B').css('left', '200px')
})
Demo
Demo 2 (by Patrick)
When you trigger the jQuery to move the menu to make it slide out, use the jquery animate command to change the "right" property of this menu icon (.genericon.genericon-menu) to 270px.
So, something along the lines of this:
$(document).ready(function(){
$('.genericon.genericon-menu').on('click', function(){
$('#idofmenu').//code to move the menu out;
$('this').animate({
right: "270px"
}, 500);
});
});
And then vice versa for when the menu collapses.
I would like to create a sidenavigation bar simply for the different sections on one of my scroll intensive webpages. What I would like to do is have the navigation bar indicate which part of a site is being viewed. An example of this is http://www.ifc.com/back-to-portlandia/#welcome. The navigation bar on the right with the six circular buttons labled 1 through six actually each turn orange when that corresponding part of the website is being viewed.
How would I do that?
So here's what I did for you. I made many slide and with their height I can know when the user change of slide. When he does that, I remove the class .current and I put it to the next li. For the moment, it only works when you're scrolling down, but with some adjustment you could easily do the samething while the user scroll up.
Here's the fiddle
My Javascript look like this :
$(document).scroll(function() {
if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.navigation li:eq('+newSlide+')').addClass('current');
}
});