Jump to content

Search the Community

Showing results for tags 'sticky'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 7 results

  1. Hello, I'm pretty new to CSS (still basic in HTML too, learned it 20 years ago and didn't use it much) and I'm trying to figure out if I can make my responsive sidebar sticky at top position when scrolled down (while the responsive action moves the sidebar to the top). Best example would be : https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp I used this how to. It's exactly the same CSS, no modification except for colors. If you resize the screen, the sidebar moves to the top which is what I want. But it doesn't "stick" there (on mobile and PC). I tried multiple ways of adding a sticky class with Javascript (window.onscroll which works really well for a Header div or top navbar div) or without Javascript. It seems that I can't do it. I must really be missing something. As an additional thing, I would like to have a sticky header (top container) added to that. So I get a full frame (yeah I used to work with frames back in the time) at the top containing a logo on the left and some text on the right (would probably be ugly on mobile though, unless I can make it responsive to reduce the logo size and text format / hide text). The top container should not be over/under the sidebar when the sidebar moves to the top. The sidebar should be below the top container and be sticky. The top container on smaller screen does not have to be sticky. That would be amazing but it's not a top priority for now. Thanks to anyone that can help!
  2. Hi guys, If you click on "AC-brytare" there will be som content on the right. I want this content (.tabcontent) to automatically scroll down using position: sticky; How come it does not work? Best, Anders <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css">* {box-sizing: border-box} body {font-family: "Lato", sans-serif;} /* Style the tab */ .tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 40%; height: 100%; } /* Style the buttons inside the tab */ .tab button { display: block; background-color: inherit; color: black; padding: 5px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 80%; } /* Change background color of buttons on hover */ .tab button:hover { background-color: #ddd; } /* Create an active/current "tab button" class */ .tab button.active { background-color: #ccc; } /* Style the tab content */ .tabcontent { float: left; padding: 0px 12px; border: 1px solid #ccc; width: 60%; border-left: none; height: 100%; overflow: hidden; position: sticky; top: 0; } </style> <h2>Solcellslexikon</h2> <div class="tab"><button class="tablinks" id="defaultOpen" onclick="openCity(event, 'AC-brytare')">AC-brytare</button> <button class="tablinks" onclick="openCity(event, 'Ampere')">Ampere (A)</button> <button class="tablinks" onclick="openCity(event, 'Anlaggningsid')">Anl&auml;ggnings-ID</button> <button class="tablinks" onclick="openCity(event, 'anslutningspunkt')">Anslutningspunkt</button> <button class="tablinks" onclick="openCity(event, 'azimutvinkel')">Azimutvinkel</button> <button class="tablinks" onclick="openCity(event, 'behorigelektriker')">Behörig elektriker</button> <button class="tablinks" onclick="openCity(event, 'belastning')">Belastning</button> <button class="tablinks" onclick="openCity(event, 'cemarkning')">CE-märkning</button> <button class="tablinks" onclick="openCity(event, 'dc')">DC</button> <button class="tablinks" onclick="openCity(event, 'effekt')">Effekt</button> <button class="tablinks" onclick="openCity(event, 'effektbegransning')">Effektbegränsning</button> <button class="tablinks" onclick="openCity(event, 'effektgaranti')">Effektgaranti</button> <button class="tablinks" onclick="openCity(event, 'egenanvandel')">Egenanvänd el</button> <button class="tablinks" onclick="openCity(event, 'elhandelsforetag')">Elhandelsföretag</button> <button class="tablinks" onclick="openCity(event, 'elproducent')">Elproducent</button> <button class="tablinks" onclick="openCity(event, 'elsakerhetsintyg')">Elsäkerhetsintyg</button> <button class="tablinks" onclick="openCity(event, 'falsatplattak')">Falsat plåttak</button> <button class="tablinks" onclick="openCity(event, 'huvudsakring')">Huvudsäkring</button> <button class="tablinks" onclick="openCity(event, 'inverter')">Inverter (växelriktare)</button> <button class="tablinks" onclick="openCity(event, 'jordfelsbrytare')">Jordfelsbrytare</button> <button class="tablinks" onclick="openCity(event, 'kilowatt')">Kilowatt (kW)</button> <button class="tablinks" onclick="openCity(event, 'kilowattimme')">Kilowattimme (kWh)</button> <button class="tablinks" onclick="openCity(event, 'likstrom')">Likström</button> <button class="tablinks" onclick="openCity(event, 'lutningpatak')">Lutning på tak</button> <button class="tablinks" onclick="openCity(event, 'monokristallin')">Monokristallin</button> <button class="tablinks" onclick="openCity(event, 'mppt')">MPPT</button> <button class="tablinks" onclick="openCity(event, 'markeffekt')">Märkeffekt</button> <button class="tablinks" onclick="openCity(event, 'noct')">NOCT</button> <button class="tablinks" onclick="openCity(event, 'natbolag')">Nätbolag</button> <button class="tablinks" onclick="openCity(event, 'optimerare')">Optimerare</button> <button class="tablinks" onclick="openCity(event, 'paneltyp')">Paneltyp</button> <button class="tablinks" onclick="openCity(event, 'pascal')">Pascal (PA)</button> <button class="tablinks" onclick="openCity(event, 'plattaktrapets')">Plåttak trapets</button> <button class="tablinks" onclick="openCity(event, 'plattakfalsat')">Plåttak falsat</button> <button class="tablinks" onclick="openCity(event, 'rails')">Rails</button> <button class="tablinks" onclick="openCity(event, 'rotavdrag')">Rotavdrag</button> <button class="tablinks" onclick="openCity(event, 'servissakring')">Servissäkring</button> <button class="tablinks" onclick="openCity(event, 'snolastberakning')">Snölastberäkning</button> <button class="tablinks" onclick="openCity(event, 'solcell')">Solcell</button> <button class="tablinks" onclick="openCity(event, 'solpanel')">Solpanel</button> <button class="tablinks" onclick="openCity(event, 'spanning')">Spänning (V)</button> <button class="tablinks" onclick="openCity(event, 'stc')">STC</button> <button class="tablinks" onclick="openCity(event, 'strang')">Sträng</button> <button class="tablinks" onclick="openCity(event, 'strom')">Ström</button> <button class="tablinks" onclick="openCity(event, 'tegeltak')">Tegeltak</button> <button class="tablinks" onclick="openCity(event, 'toppeffekt')">Toppeffekt</button> <button class="tablinks" onclick="openCity(event, 'verkningsgrad')">Verkningsgrad</button> <button class="tablinks" onclick="openCity(event, 'vindlastberakning')">Vindlastberäkning</button> <button class="tablinks" onclick="openCity(event, 'volt')">Volt (V)</button> <button class="tablinks" onclick="openCity(event, 'vaxelriktare')">Växelriktare</button> <button class="tablinks" onclick="openCity(event, 'vaxelstrom')">Växelström</button> <button class="tablinks" onclick="openCity(event, 'watt')">Watt (W)</button> <button class="tablinks" onclick="openCity(event, 'overskottsel')">Överskottsel</button> <button class="tablinks" onclick="openCity(event, 'overspannigsskydd')">Överspänningsskydd</button> </div> <div class="tabcontent" id="AC-brytare"> <h3>Vad &auml;r en AC-brytare?</h3> <p>AC-brytare krävs för att koppla bort växelriktaren från elnätet vid service och underhåll. Nätbolaget skall alltid ha möjlighet att slå ifrån anläggningen. Brytaren placeras bredvid eller i närheten av växelriktaren för att göra det enklare att frånskilja växelriktaren. </p> <script>function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click();</script> </body> </html>
  3. So basically, I have my sticky navbar working with a working dropdown inside. My problem: when I scroll down and the sticky class is activated, the dropdown stops working. So how can I fix that? This is the code I have over there <div class="navtop"> <div class="dropdown-user"> <div class="dropbtn"><img src="images/user.png" alt="Perfil de Usuario" width="20px"><span>'.$_SESSION["username"].'&nbsp;&nbsp;<i class="fa fa-angle-down"></i></span></div> <div class="dropdown-user-content" id="dropdown-user-content"> <a href="perfil.php"><i class="fa fa-fw fa-user"></i> Perfil de usuario</a> <a href="mensajes.php"><i class="fa fa-fw fa-envelope"></i> Mensajes</a> <a href="reglas.php"><i class="fa fa-fw fa-book"></i> Reglas</a> <a href="resumen.php?logout=1" style="color:red"><i class="fa fa-fw fa-arrow-right"></i> Salir</a> </div> </div> </div> <style> .sticky { position: sticky; top: 0; z-index: 1; } .navtop { width: 100%; background-color: #000; overflow: hidden; color: #fff; font-size: 12px; } .dropdown-user { float: right; overflow: hidden; } .dropdown-user:hover { background: darkgrey; cursor: pointer; } .dropdown-user .dropbtn { outline: none; height: 31px; background-color: inherit; font-family: inherit; } .dropdown-user img { float: left; margin: 5px 4px 0px 5px; } .dropdown-user span { float: left; padding: 8px 8px 8px 0px; } .dropdown-user-content { display: none; right: 0; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-user-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-user-content a:hover { background-color: #ddd; } .dropdown-user:hover .dropdown-user-content { display: block; } </style Thanks in advance!
  4. I am developing a single page website that scrolls to each section when selected, live example: http://sandbox.digitango.com/ The issue I am having is with the sticky header, when you click the first link "Why AMAC" it will send you to the first section BUT when the header changes to fixed position it covers the content. I searched google reading a ton of articles but nothing seemed to address this issue, maybe I am missing the correct term for what my issue is. Is there any solution you know of that can fill the gap for when the header changes to fixed? - Image one - what the problem looks like - Image two - how I would like it to look
  5. For whatever reason, anytime I use "position: sticky" in whatever form whether it's browser supported or through the Stickyfill.js it breaks the w3-bar navigation menu. w3schools.com obviously has a way to make it work. But I can't. Sticky off - dropdown menu works perfect. Stick ON and the menu button clicks but the dropdown content is not displayed. Or at the very least it's not visible if it is. http://dev.daellusknights.com/index.html <-- Sticky ON (broken) http://dev.daellusknights.com/index2.html <-- Sticky OFF (works) Is this a known issue or am I just missing something. Currently working with MS Edge and latest Chrome on Win 10 Pro (dev)
  6. so i am new to js and i made myself a sticky nav with the help of a guide but i tried to apply it on to the image in the nav as well to make it have a opacity of 0 or 1 whenever it hits the top of my browser window in chrome it adds the class and removes it but the img just stays hidden i don't know why the sticky nave works fine but the css just wont adjust on the img http://pastebin.com/ELNQdwWF
  7. Hi guys, i have a sticky popup contact us form on a website im playing around with locally. When the user clicks on the Contact Us button, the contact us form fly's out from the rhs. I am unable to get IE 11 to correctly position the "sticky-popup-right .popup" title in css (although it seems to work fine in chrome and firefox). please note, there is code in the attached css file for other popup locations (Right Side Popup style, Right Bottom and Left Bottom Side Popup Style, Left Side Popup Style). The only one im interested in at present is the Right Side Popup style. sticky-popup.css
×
×
  • Create New...