So I'm currently designing a website on Weebly. However, the theme that I'm using contains a sticky/fixed navigation menu. So whenever I scroll up or down, the nav bar always sticks to the top. I want it so that the nav bar stays in an absolute position and doesn't stay fixed to the top when scrolling.
I've tried editing the CSS and changing the position of the "header" from
position: fixed; to position: absolute; but that doesn't seem to have done anything at all. The main trouble is that my website contains JavaScript too which I believe also has some control over the position of the header. I've found certain parts of JS code which I believe have some influence over the sticky function.
if ($body.hasClass('header-sticky-up')) {
base._utils.onScrollDirection({
down: function(currentScrollTop) {
$header
.removeClass('is-visible')
.toggleClass('is-sticky', (currentScrollTop > headerHeight * 2));
base._closeAllDropdowns();
},
up: function() {
$header.addClass('is-visible');
},
Does anyone with a JS background have a fix to this?
Also the "header-sticky-up" relates to a function in the CSS part of the code which goes like this:
body.header-sticky-up & {
position: fixed;
&.is-sticky {
.translate3d(0, -100%, 0);
.transition(transform 0.2s ease-out);
}
&.is-visible {
.translate3d(0, 0, 0);
}
use position:absolute!important in your styling
Related
I have a small and very simple segment of jQuery code which applies a class which uses position: fixed to the navigation element of my page so that the navigation can become sticky and therefore stay with the user as they scroll down the page.
I am building this on an Commerce platform. The issue is that it looks as though when position: fixed is applied to the navigation element, the property isn't working correctly. It looks as though the position is becoming "fixed" but it's only fixed within the header area that it is contained within and I have no idea why this could be happening. Please see below if you would like to see this for yourself:
http://ts564737-container.zoeysite.com/
You can see that after scrolling slightly, the navigation element becomes fixed but not correctly as it should.
Please see my code below:
CSS
.fixed {
top: 0 !important;
z-index: 100 !important;
position: fixed !important;
transition: all 0.3s;
background-color: #000000;
opacity: 0.9;
}
JavaScript/jQuery
<script>
var num = 40;
jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > num) {
jQuery('.navigation').addClass('fixed');
} else {
jQuery('.navigation').removeClass('fixed');
}
});
</script>
Could anybody provide any insight as to what's going wrong here and causing the element to not fix properly? Any advice at all is much appreciated, thank you so much.
It's because your some parent/parents container contains css transform property.
I have added this css and your fixed element started working:
* {
transform: none !important;
}
Fixed elements in parent which have transform property have different behaviour.
Related issue
http://codepen.io/justinturner/pen/VjyWJE
The linked codepen has a fixed header div.
I'm using javascript to add a menu div on the left when the hamburger icon is clicked. This is also a fixed div.
When the menu div is added, the header div seems to revert to relative positioning, and jumps to the top of the main content div. Scroll down just a hair and then click the hamburger, you'll see what I mean.
What issue am I running into here? When a user clicks the hamburger, I want the header to remain fixed and translate directly to the right like the rest of the content.
<em>too much code to paste</em>
According to the spec and other similar questions here on SO, fixed elements and translates don't "play" well together.
As a workaround you could:
1) Use transitions (eg. on the left property) instead of transform (translateX)
2) Remove the position:fixed button from the container which uses transforms
Following the first suggestions from above (using left instead of translateX), edit your code to the following and the issue should no longer persist.
.o-wrapper.has-push-left {
left: 300px;
}
.o-wrapper {
position: relative;
transition: left 0.3s;
}
#header-wrapper {
transition: left 0.3s;
}
.has-push-left #header-wrapper {
left: 300px;
}
DEMO
I've built a client's site on Squarespace.
I want to create a header that:
1) Has a transparent background when the user first arrives on the page
2) When the user scrolls down, gets a background color and remains affixed to the top of the viewport.
Thanks!
Some info
CSSTricks have a great little example on how to do this (this is the common solution for this).
The basics for this solution is that you listen to the scroll event and check when you get to the right spot (you can calculate that spot programmatically if you want). If you do, you add a class to the header that does the following:
makes the header colored like you wanted it to be
make the header position: fixed; top: <num>; or position: absolute; top: <num> (I've seen both solutions out in the field)
!IMPORTANT! the position:absolute solution is less safe, since position: fixed positions the element relative to the viewport. position:absolute will do the same only if it doesn't have any predecessor with a position:relative [for more info, check this link ]
There's an experimental css feature for position which will add a position: sticky option. In theory, this will do the sticky part by itself [You can see it's experimental by the Experimental Badge next to it on MDN].
The actual solution
https://css-tricks.com/scroll-fix-content/
It also includes a demo with the code on codepen.io. Just notice that you need to scroll the view box (class="wrap") and not the page itself.
You have to combine a few things.
First of all, in your css set for the header position: fixed
You have then to set the transparency. Something like should be enough: opacity: 0.5. You can even use RGBA to specify both color and transparency (I like this one more): background-color: rgba(255, 0, 0, 0.3)
Last, you have to bind an handler to to scroll event with JavaScript. If you can use jQuery, something like this should suffice (I suppose you have an element with id="header"):
$("#header").scroll(myScrollHandler);
function myScrollHandler () {
if (window.pageYOffset > 50)
{
$("#header").fadeTo(200, 0.9);
}
else
{
$("#header").fadeTo(200, 0.3);
}
}
I used sample values, the first one is the duration in ms, the second the target opacity, where 0 is invisible and 1 is full. In the if I compare the offset of the page to the number of pixels after wich the header will start appearing.
So, to recap, in your css you should have something like this:
#header {
position: fixed;
top: 0;
width: 100%;
rgba(255, 0, 0, 0.3);
}
in your html something like this
<script>
$("#header").scroll(myScrollHandler);
function myScrollHandler () {
if (window.pageYOffset > 50)
{
$("#header").fadeTo(200, 0.9);
}
else
{
$("#header").fadeTo(200, 0.5);
}
}
</script>
<div id="header">
Your header content
</div>
I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image
I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.
Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.
I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.
How to get page 's scroll position change event?
I want to implement dynamic table of contents like http://bonsaiden.github.com/JavaScript-Garden/ ( In this website, with your scrolling of the webpage, It also shows the current active item)
Is it possible to implement same thing without getting current scroll-position?
I am very new to JS and web-world.
That page does use some JS trickery with its <nav> element, but it's fixing the location of the sidebar using position: fixed, that is, using CSS not JavaScript. Here's the relevant style declaration (comments mine):
nav {
position: fixed; // fix position
margin-left: 750px; // add 750 px of room to the left
top: 0; // set 0px from top of page
}