How to Make The Contents of a Fixed Element Scrollable Only When It Exceeds The Height of The Viewport

How can I make the contents of a fixed element scrollable only when it exceeds the height of the viewport?

You probably can't. Here's something that comes close. You won't get content to flow around it if there's space below.

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

You can do a percentage height as well:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

Make div with `position:fixed` scrollable if it exceeds the page's height

Adding a

max-height: 90vh;

to the element with id 'nachrichten'

// The plain text in this function (except error messages) is in German because it's for my German website. 
function nachrichtenwidgetAnzeigen() {
    const nw = document.createElement('div');
    nw.id = 'nachrichtenwidget';
    nw.hidden = true;
    nw.style = 'position:fixed;top:0px;right:0px;max-height:calc(100%-3px);max-width:33%;border-left:1px solid blue;border-bottom:1px solid blue;border-bottom-left-radius:6px;background-color:rgba(0,255,0,0.3);color:rgba(0,0,0,0);/*pointer-events:none;opacity:80%;*/';
    nw.nachrichten = document.createElement('div');
    nw.nachrichten.id = 'nachrichten';
    nw.nachrichten.style = 'color:white;background-color:rgba(0,0,0,0);overflow-x: clip;overflow-y:auto;max-height:90vh';
    nw.nachrichten.addMsg = nw.addMsg = function(msg, iconURL=undefined, msgTimeout=10_000, options={color:'white',bgColor:'blue',onclickaction:''}) { // Einfach msgTimeout=-1 setzen, um eine permanente Nachricht zu erstellen.
        const msgElmnt = document.createElement('div');
        try {
            if (typeof options.onclickaction === 'function') {
                msgElmnt.addEventListener('click', (e) => {
                    msgElmnt.close();
                    options.onclickaction();
                });
            } else if (typeof options.onclickaction === 'string') {
                msgElmnt.addEventListener('click', (e) => {
                    msgElmnt.close();
                    Function(options.onclickaction)();
                });
            } else {
                throw new TypeError(`options.onclickaction isn\'t of type "function" or "string" (is of type "${typeof options.onclickaction}")!`);
            }
        } catch (e) {
            console.warn('Couldn\'t assign onclickaction to message, ignoring that.');
            console.warn(e);
        }
        // msgElmnt.style = 'pointer-events:auto;';
        if (iconURL!==undefined) {
            msgElmnt.msgImg = document.createElement('img');
            msgElmnt.msgImg.style = 'max-width:33px;max-height:33px;padding-right:3px;';
            msgElmnt.msgImg.src = iconURL;
            msgElmnt.appendChild(msgElmnt.msgImg);
        } else {
            msgElmnt.msgImg = undefined;
        }
        msgElmnt.innerHTML += msg;
        msgElmnt.id = `msg-${msg.replace(/[^a-z0-9]/gi, '-').toLowerCase()}`;
        msgElmnt.style = 'background-color:blue;color:white;padding:3px;margin:3px;border:0px solid blue;border-radius:3px;display:flex;flex-direction:row;';
        if (msgTimeout >= 0) {
            msgElmnt.style.flexWrap = 'wrap'; // Nur wenn eine Nachrichtenanzeigedauer existiert: flex-wrap auf 'wrap' stellen.
        }
        msgElmnt.timeout = document.createElement('div');
        msgElmnt.timeout.style = 'width:100%;height:3px;border:0px solid blue;border-radius:3px;color:rgba(0,0,0,0);background-color:grey;flex:0 0 100%;';
        msgElmnt.timeout.bar = document.createElement('div');
        msgElmnt.timeout.bar.style = 'width:100%;height:3px;border:0px solid blue;border-radius:3px;color:rgba(0,0,0,0);background-color:lightblue;';
        async function animTimeout(e) {
            msgElmnt.timeout.bar.animate([
                { width: '100%' },
                { width: '0%' }
            ], msgTimeout);
            msgElmnt.timeoutAnimation = msgElmnt.timeout.bar.getAnimations()[0];
            msgElmnt.timeoutAnimation.addEventListener('finish', (e) => {
                msgElmnt.remove();
                nw.countElmnt.innerText = nw.nachrichten.getElementsByTagName('div').length/3;
            }); // Nachricht nach Ablauf der Animation entfernen
        }
        msgElmnt.addEventListener('mouseover', (e) => {
            if (msgElmnt.timeoutAnimation) {
                msgElmnt.timeoutAnimation.pause();
            }
            msgElmnt.style.border = '1px solid white';
            msgElmnt.style.padding = '2px';
        });
        msgElmnt.addEventListener('mouseout', (e) => {
            if (msgElmnt.timeoutAnimation) {
                msgElmnt.timeoutAnimation.play();
            }
            msgElmnt.style.border = '0px solid blue';
            msgElmnt.style.padding = '3px';
        });
        if (msgTimeout>=0) { msgElmnt.timeout.bar.addEventListener('click', animTimeout); } else { msgElmnt.timeout.hidden = true; }
        msgElmnt.close = function() { /* Unscharf und durchsichtig animieren */msgElmnt.remove(); nw.countElmnt.innerText = nw.nachrichten.getElementsByTagName('div').length/3; };
        msgElmnt.timeout.appendChild(msgElmnt.timeout.bar);
        msgElmnt.timeout.bar.click();
        msgElmnt.timeout.bar.removeEventListener('click', animTimeout);
        msgElmnt.appendChild(msgElmnt.timeout);
        nw.nachrichten.appendChild(msgElmnt);
        nw.countElmnt.innerText = nw.nachrichten.getElementsByTagName('div').length/3; // Durch drei, weil jede Nachricht ein DIV-Element mit zwei DIV-Elementen ineinander darin ist.
        return msgElmnt;
    }
    const nwClose = document.createElement('button');
    const nwOpen = document.createElement('button');
    nwClose.id = 'nwClose';
    nwClose.hidden = true;
    nwClose.innerText = '\xa0X\xa0'; // \xa0 entspricht der HTML-Entität  
    nwClose.title = 'Nachrichtenwidget ausblenden';
    nwClose.style = 'background-color:red;border-radius:10px;';
    nwClose.addEventListener('click', (e) => {
        nwClose.hidden = true;
        nw.hidden = true;
        nwOpen.hidden = false;
    });
    nwOpen.id = 'nwOpen';
    nwOpen.hidden = false;
    nwOpen.title = 'Nachrichtenwidget einblenden';
    nwOpen.style = 'position:fixed;top:0px;right:33px;background-color:green;';
    nwOpen.addEventListener('click', (e) => {
        nwOpen.hidden = true;
        nw.hidden = false;
        nwClose.hidden = false;
    });
    const nwTitle = document.createElement('span');
    nwTitle.style = 'color:white;background-color:rgba(0,0,0,0);padding-left:3px;user-select:none;';
    nwTitle.innerText = 'Seitennachrichten';
    nw.countElmnt = document.createElement('span');
    nw.countElmnt.style = 'color:white;background-color:rgba(0,0,0,0);padding:3px;user-select:none;';
    document.body.appendChild(nw);
    nwOpen.appendChild(nw.countElmnt);
    document.body.appendChild(nwOpen);
    nw.appendChild(nwClose);
    nw.appendChild(nwTitle);
    nw.appendChild(nw.nachrichten);
    nwOpen.click();
    return nw;
}

// Spawn the widget: 
notifWidg = nachrichtenwidgetAnzeigen();
notifWidg.addMsg('This is a notification widget. You can close any notification by clicking on it.', 'https://www.lampe2020.de/favicon.ico', -1);

// Just to spawn some messages to show what happens: 
setInterval(() => {
  notifWidg.addMsg('Test notification', undefined, 10_000)
}, 500);

How to keep scroller in view inside of Fixed position div with top pixels pushing it down?

If I understand the issue correctly - you want the fixed element to fill the screen apart from the header height... then you could try :

.not-stuck {
    height: calc(100% - 60px);
}

Looking at the other solutions on the page that was linked to, my personal second choice would be to use JavaScript (but the question doesn't have that tag of course).

Fixed modal wont scroll when overflowing the viewport

You need to add this css properties to modal__content :

  position:relative;
  overflow:auto;
  height:100%;

• z-index was not being applied because the position was static so you
  need to add position:relative
• and to activate the scroll you need to add both overflow:auto and a
  fixed height of 100%
• Without forgetting you should fix the height of the modal parent
  modal to 100% as well

See result:

html,body {  width: 100%;}
html {  height: 100%;}
body {  min-height: 100%;  font-family: consolas;}
.main {  border: 2px solid blue;}
.modal {  z-index: 10;  position: fixed;  top: 0;  left: 0;  width: 100%;  height: 100%;  border: 2px solid red;}
.modal__overlay {  z-index: 1;  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background-color: rgba(138, 138, 138, 0.5);  border: 2px dashed green;}
.modal__content {  z-index: 2;  border: 2px dotted blue;  position: relative;  overflow: auto;  height: 100%;}
.simulate-content {  width: 120px;  height: 200px;  margin: 12px auto;  padding: 12px;  text-align: center;  font-weight: bold;  background-color: rgb(255, 50, 50);}

<body>  <!-- PLACEHOLDER CONTENT -->  <div class='main'>    <h3> BODY CONTENT </h3>    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>  </div>
  <!-- THE MODAL -->  <div class='modal'>    <div class='modal__overlay'></div>    <div class='modal__content'>      <p class='simulate-content'>MODAL CONTENT 1 of 5</p>      <p class='simulate-content'>MODAL CONTENT 2 of 5</p>      <p class='simulate-content'>MODAL CONTENT 3 of 5</p>      <p class='simulate-content'>MODAL CONTENT 4 of 5</p>      <p class='simulate-content'>MODAL CONTENT 5 of 5</p>    </div>  </div></body>

When scrolling, I want the position: fixed content to not move if it hits this (class)

This can be done with pure CSS with no JS, .fixedBox element should be reordered for this, like so:

ul,li { 
    margin: 0;
    padding: 0;
    list-style: none; }

#topArea {
    min-height: 200vh;
    background: #f4f4f4;
}

.fixedBox {
    position: sticky;
    width: 100%;
    padding: 30px;
    left: 0;
    bottom: 0; 
    border: 0;
    z-index: 88;
}

.fixedBox .fixedList { 
    color: coral;
    font-size: 30px;
    font-weight: 600;
}

.LimitPoint {
    width: 100%;
    height: 1px;
    background: red;
}

#bottomArea {
    position: relative;
    margin: 120px 0 0;
    padding: 0 5%;
}

#bottomArea ul div {
    position: relative;
    display: flex;
    flex-direction: row;
}

#bottomArea ul li {
    padding: 7px;
}

#bottomArea ul li img {
    width: 100%;
    height: auto;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div id="topArea"> </div>

<div class="fixedBox">
    <ul class="fixedList">
        <li>content</li>
        <li>content</li>
        <li>content</li>
        <li>content</li>
    </ul>
</div>

<div class="LimitPoint"></div>

<div id="bottomArea">
    <ul>
        <div>
            <li><img src="https://url.kr/inj9yz"></li>
            <li><img src="https://url.kr/inj9yz"></li>
            <li><img src="https://url.kr/inj9yz"></li>
        </div>
        <div>
            <li><img src="https://url.kr/inj9yz"></li>
            <li><img src="https://url.kr/inj9yz"></li>
            <li><img src="https://url.kr/inj9yz"></li>
        </div>
    </ul>
</div>

---

Related Topics