内容固定时背景滚动

Question

I am making a website using vue.js and Bootstrap I have made use of bootstrap's jumbotron component at the top of my web page right below my navigation and I would like to know how to make some of the elements scrollable while keeping some elements stationary. I will include an example as I am aware this is still confusing at this point.

Demo

This is a demo of just the jumbotron there will be other content on the page beside the jumbotron what I want is the Buick logo (I will have other logos as well) to scroll for a short time in the background behind the other content until the main scroll action of the page takes over. I hope what I am looking for is clear now. If you need more info I will be happy to provide it.

Just to be clear in these pictures just show the jumbotron not the whole page. Also fixed position is not a solution to my problem as I want the stationary elements to remain in the jumbotron.

Answer 1

If I get the problem right, this should do the trick: https://codesandbox.io/embed/serene-rhodes-42224?fontsize=14&hidenavigation=1&theme=dark .

Briefly what was done:

1. Make text and logo wrappers direct children of scrolling container. In your case it was.jumbotron, which had only one direct child - native jumbotron.container. So, instead I set the scrolling behavior on.wrapper div instead of.jumbotron.
2. Set position sticky on text wrapper. This will give us the desired behavior: sticks to the top (or any set border) of parent, and scrolls with it when main window scrolls.
3. Set a height for logo wrapper with position absolute, which basically controls how long the user will have to scroll the jumbotron before the logo appears.

Answer 2

So from what I understand you want to make some elements scrollable whilst others are in fixed positions. this can be done using css positioning and overflow. If you have an element that you want to be unscrollable unless there is enough content in that div to make it scrollable use the following css

 position: fixed; overflow-y:scroll;

However if you want the element to remain unscrollable (you cant scroll on it no matter what) just use the following css:

 overflow: hidden;

Answer 3

You need to use background-attachment property of CSS.

HTML:

<div class="fixed">
--- Your Content Here ---
</div>

CSS:

.fixed {
  background: url('https://cdn.pixabay.com/photo/2016/06/11/23/22/soap-bubbles-1451092_960_720.jpg');
  background-attachment: fixed;
height: 400px;
  width: 50%;
  max-width: 600px;
  margin: 32px auto;
}

Check CodePen here