1

I've a fixed element at the bottom of the page that stays on top of every other element. It's about 33% of the page's width. As I scroll the page, other elements keep on going behind this element.

What I want is a little bit of distance between the top of this element and where the other elements start to hide. This is easily possible. But my requirement is to have this gap to be colored same as that of the body at that vertical position.

Is it possible preferably without using JavaScript?

The white area in this fiddle is what I want to have of the same color as that of the body (at that vertical position): https://jsfiddle.net/f5qnv8bL/1/

Check this image

body {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
  height: 2000px;
}
<div style="background-color:green; float:right; height:750px;">
Something here
</div>

<div style="background-color:white; height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>
manisar
  • 103
  • 1
  • 7
  • why not just create CSS class for both? E.g. `.yellow-background { background: -webkit-gradient .....` and then `body class="yellow-background"` and also for your gap div? – Expressingx Oct 22 '20 at 05:18
  • Thank you, this worked, I should have tried it before posting the question. But it doesn't for some of my use cases where I'm using same color with different alpha values for the linear-gradient (instead of using the different colors). And on some pages, there are images as well (used as background) along with the gradient color superimposed on it. Please have a look at my comment to @coolmatt4321's answer, and the [fiddle](https://jsfiddle.net/3kxqbw1f/) as well. Any ideas to make it work for these cases? – manisar Oct 22 '20 at 17:41

2 Answers2

0

The @Expressingx suggestion at the comment section is right, you can try this by adding same color to the gap div.

Add CSS:

.yes {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
}

And Add yes class to your HTML:

<div class="yes" style="height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

I know it isn't the silver bullet solution, but it's fine to just give it a try.

Adi Sakti Jrs
  • 99
  • 7
  • Yes, thank you, and I feel bad for not trying it before. There are a few cases in which this doesn't work (the gap color doesn't blend with the body color). I request you to please have a look at my comment to @Expressingx or coolmatt4321. This [fiddle](https://jsfiddle.net/3kxqbw1f/) explains one of those cases. – manisar Oct 22 '20 at 17:46
0

Is this what you mean?

Html:

<div style="background-color:green; float:right; height:750px;">
Something here
</div>

<div id="whatever" style="background-color:white; height: 120px; position:fixed; bottom:0; right:0; width: 400px;">
  <div style="background-color:red; height: 100px; position:fixed; bottom:0; right:0; width: 400px;">
  </div>
</div>

CSS:

body {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
  height: 2000px;
}

#whatever {
  background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(#fffa94)) fixed;
}
coolmatt4321
  • 48
  • 6
  • Thanks much, this solves my problem in many cases. But I apologize, I didn't give the complete picture in my question. On many pages, I'm not using two colors in the gradient, instead the **same color** with different alpha values, e.g. check this fiddle: [link](https://jsfiddle.net/3kxqbw1f/). Here, I used `from(#f5ec42ff), to(#f5ec42bb))`. In this case, the padding is not blending with the body. In some cases, there is an image as well used for background along with gradient colors. Any suggestions to include those cases? – manisar Oct 22 '20 at 17:30
  • I have tried racking my brain and searching the web and have found nothing. I would consider posting a new question with those cases because there is a lot of smarter people on here than me who can answer your question. – coolmatt4321 Oct 24 '20 at 05:43