I've created sticky scrolling effect (boxes are scrolling down and overlaping) using Elementor and Wordpress (here: http://195.78.66.87/~marwis93/brudnopis/).
Now I'am trying to move this effect to Bootstrap or pure CSS, any hint or idea how to this? I am not an expert not nothing works, sticky parameter does not work at all.
Related
I`m trying to make blurry, sticky navbar. It works great when scrolling over elements like images, but when scrolling over text it is not working. Here is my full code:
https://play.tailwindcss.com/GaBOgqZIsq
Your code is working fine for me. Here's a sandbox with your working code :
https://play.tailwindcss.com/pPuNJlPjHi
I edited a little your bg-class and put down your opacity so you can see the blurry effect.
In my opinion it seems that your problem is more a question of contrast than you effect not working
I am new to Elementor and trying to fixe my sidebar but it isn't working right. Can you help me? Here is the image of what I do.
The page in which I am trying to make the sticky sidebar
I'm trying to achieve parallax effect only using CSS. I have achieved to manage parallax effect for a single image by having it's position fixed and setting z-index to -1. I'm having trouble incorporating the same technique for the second image as it overlaps with the first one. How do I resolve this?
I'm working on developing a website but I'm facing an issue.
I'm creating a navigational bar which works 90% - there is just a little issue. When a user scrolls to a certain distance, the navigational bar becomes 'stuck' to the page, scrolling with the user. When the navigational bar is 'stuck', it overlaps the main browser bar.
I'm not too sure why this happens, but I believe that the div above it might be causing the issue.
Ignore the icons to the right of the page, windows eight.
Here's the whole page and stylesheet: https://gist.github.com/TaylerKing/7977e60099c3726938fb
Excuse me for the rusty styling, haven't done pure web design for a year or two;)
The problem is the use of overflow-x:hidden, combined with the navigation bar that is position:fixed. Using position:fixed in unusual situations like this is not as well supported as you might expect.
An alternative would be to use position:relative, and have JavaScript update the top as appropriate.
So in your function navigation rather than adding and removing fixed, you would instead be setting $('.navigation').css('top', window_top - div_top). (remember, the div.navigation has to be position:relative first)
I'm having a little trouble here: ..
Everything seems to work fine (had a small problem with the divs moving around when I resized the window but managed to fix it with a little help from the users of StackOverflow) but I have run into another problem now.
I'm using wordpress for this website with some modifications to a basic theme that I've made. Everything works fine except when you make the window quite small, the horizontal scrollbar appears but when you scroll the horizontal scroll bar you'll notice that the menu overlaps with the content.
How can I make it so that they don't overlap? I tried to make the position of the sidebar absolute instead of fixed, but the menu is supposed to stay there when I scroll vertically.
Not sure how I should go about this... any help would be appreciated!
Thanks!
As I said in my comment, you will need javascript to prevent the content div from overlapping the fixed menu
To point you in the right direction check out this
plugin on github .. its a great plugin using jQuery to accomplish pretty much exactly what you're after ..
Here is the working version using a small bit of jQuery, I hosted it so its easier for you to see:
The only change to the layout you need to make is to set the sidebar-primary div to left: 0; , it nudges that div very slightly to the left, but I think its worth it given that your original problem is solved with just a tiny bit of jQuery. Let me know if it works for your layout ..