[Vuejs]-Background scrolls while content is fixed

by

2👍

✅

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.

-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;

-2👍

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

Leave a comment