I have a navigation bar at the top of the page and I'm trying to get a box shadow to appear underneath it on scroll.
I've tried using .active and :active with no luck. I can force the shadow to appear in chrome devtools but can't get this to work otherwise on scroll.
.sidenav-breadcrumbs {
height: 45px;
font-size: 16px;
font-weight: bold;
background: red;
}
.nav-fixed-top {
position: fixed;
top: 100px;
right: 0;
left: 0;
z-index: 1020;
}
.shadow:active {
box-shadow: 0 0 10px rgba(0,0,0,0.4)!important;
}
Shadow should appear under bar on scroll but seems to only appear when clicking the bar.
Thank you if you can help.
Active selector applies to clicked element, that's why the shadow appears when you click the bar. There is no selector for scroll, so you should be using JavaScript to add the shadow class while scrolling.
document.addEventListener("scroll", function(){
addShadowClassToBar();
});
And since you probably want to remove the shadow after scrolling is finished you should also remove the class. Here is a previous question that deals with detecting scroll stop.
Related
I have a fixed position element at the bottom of the page bottom: 0 with a background colour of black. It's a navigation element that has things scrolling behind it.
I'm trying to do a stained glass effect using backdrop-filter: blur(20px) so I need to change the opacity of the background-color: rgba(18,18,18,0.3).
When I add the filter change, the fixed element goes up 1px, which means I can see a pixel of the things scrolling at the bottom of the page.
Why is this happening?
What can I do to prevent/fix this?
Thanks in advance!
.myDialog {
padding: 5px 10px;
background-color: rgba(255,255,255,0.4);
backdrop-filter: blur(20px);
position: fixed;
bottom: 0;
}
body {
background: green;
}
<div class="myDialog">
I don't disappear when you scroll!
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>aksldjnaskjdnaksjdnakjsdnakjnsdkajsndakjsndkajsndkjasndkjasndkjandkjanskdjnaskdjnaskjdnakjsdnakjsndkajndkjasndkjansd<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
(there's a piece of text that when you scroll through, you see it behind the fixed box).
https://jsfiddle.net/379heofx/2/ (in case code above doesn't show, which boggles my mind even further)
screenshot of issue:
You can try and use the opacity keyword instead.
So like this:
yourelement {
background-color: black;
opacity: 0.3
}
I'm attempting to help a friend with her site jessheading.com
She's using a WordPress theme and the WP Touch mobile plugin. But when someone clicks to view the full-site version on mobile, the orange box with the quote part way down the page runs off to the side when you zoom out (creating a sort of side-scroll).
The CSS on that box is:
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
}
How can I fix the CSS or the viewport settings to prevent zooming out so far so that that orange box overflows to the right?
Parent of the box:
{
overflow-y: auto
}
.pull-quote {
background: #fb8063;
width: 300%;
margin: 30px 0 30px -100%;
z-index: 70;
position: relative;
overflow: hidden;
}
this merely clips overflow, and the rest of the content will be invisible
some other things to consider is to resize the whole orange box as well as the tags with it.
other overflow css you can try are: scroll, auto, etc.
quite possibly even set the width of the orange box to be fixed and display it within a div tag that has a background of orange.
hope this helps
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
This question already has answers here:
Click through div to underlying elements
(17 answers)
Closed 7 years ago.
Is there a way, in CSS, I can make an element click-through-able. I have an absolutely positioned <div> covering a link. I'd like to be able to click the link through the overlay <div>. The overlay has a mostly transparent background, and the link has no covering pixels.
I've tried background: url('...') transparent, but to no avail.
Here is a JSFiddle demonstrating my problem. The link can be clicked in IE8, but not in FireFox. What I want to do is make an image ticker in the #underlay div. The overlay is so that I can have a background with a gradient from solid to transparent on the bottom and top, so I can make the images sort of 'scroll into nothing', without fading the entire image out at once, if this makes sense (if anyone has an android phone, try scrolling your memos and watch the top/bottom of the screen - the memos fade into nothing).
I've fixed your problem by adding pointer-events: none; to the absolute block.
body {
margin: 0;
padding-left: 10px;
font: 20px Arial, sans-serif;
line-height: 30px;
}
a:hover {
color: red;
}
#overlay-blocking,
#overlay-passing{
position: absolute;
height: 30px;
width: 10em;
left: 0;
}
#overlay-blocking {
top: 30px;
background: rgba(0,100,0, .2);
pointer-events: none;
}
#overlay-passing {
top: 0;
background: rgba(100,0,0, .2);
}
Link blocked<br>
Link available<br>
Link available<br>
<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>
I don't think it is possible, because an image is still a complete box. But have you tried these Image Maps? Seems like that's what you want.
OTHER OPTION
You could also seperate your image into 2, and make sure that your boxes are not overlaying your link of course.
Perhaps this answer would be of some use to you, if you can nest the overlay inside the link: With only CSS, is it possible to trigger :hover and click events underneath an element?
I want to positioning a div element (popup) on the center of the screen via CSS. No problem with this.
The problem comes when i scroll the browser and then i click on the element that displays the popup, but this one will be displayed on the top of the page, instead of centering it on the rendered area (scrolled)
The popup must remain stocked to the page and let scrolling over it.
Does anyone know how to do it?
Thanks in advance
This is achievable in JavaScript. You should have the link that brings up the div element do this (jQuery):
var divTop = 75 + $(window).scrollTop(); // places the popup 75px from the top
$('.popup_inner').css({'top':divTop, 'display':block});
Position: fixed is also an option, but I don't believe it is supported by IE6, if that matters to you.
I believe what you want is position:fixed instead of position:absolute.
Taken from jqModal:
.popup{
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #eeeeee;
color: #333333;
padding: 12px;
}