Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Farouk Charkas
Farouk Charkas
1,957 Points
Posted by Farouk Charkas
Farouk Charkas
1,957 Points

How do I create a fixed button position?

I am trying to create a fixed button position that when I scroll down, the button is there, like following you, when scrolling up or scrolling down.

4 Answers

Anthony Mejia
Anthony Mejia
8,840 Points

To fix an element to the window and keep it's position as you scroll, you can add 

position: fixed

to your CSS. This will anchor the element's (in your case, the button) position relative to the window (not the rest of the HTML document) and won't scroll away if you scroll up or down, left or right.

Let us know if this solution works for you, Farouk.

EDIT: Here's a demo I've created showing this CSS rule.

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

should be 

position: fixed;

instead of display.

and then you can specify the position of the button on the viewport using top, right, bottom, and left.

Farouk Charkas
Farouk Charkas
1,957 Points
Farouk Charkas
Farouk Charkas
1,957 Points

Thank you, Anthony Mejia and Jake Lundberg, I appreciate it.

Anthony Mejia
Anthony Mejia
8,840 Points
Anthony Mejia
Anthony Mejia
8,840 Points

Good catch Jake! I knew something seemed wrong when I read it over. Thanks for the correction.

Farouk Charkas
Farouk Charkas
1,957 Points
Farouk Charkas
Farouk Charkas
1,957 Points

Thank you so much! Except I now have a new problem, with the same topic. 

``` <html>
<head>
    <title> Evergreen
    </title>
    <script src="http://www.parsecdn.com/js/parse-1.6.7.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body style="margin:110;padding:0">
    <font face="Magneto" size="16"><div  id="fixedheader">189</div></font>
    <style type="text/css">
        body {
            background-color: #CCC;
            margin: 80px 80px 100px 100px;
        }

        .boxed {
            border: 1px solid #333;
            background: #999;
            margin-top: 30px;
            border-bottom-right-radius: 25px;
            border-top-right-radius: 25px;
            border-top-left-radius: 10px;
        }

        div#fixedheader {
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
            color: #CCC;
            background: #333;
            padding: 20px;
        }

        div#fixedfooter {
            position: fixed;
            bottom: 0px;
            left: 0px;
            width: 100%;
            color: #CCC;
            background: #333;
            padding: 8px;
        }
    </style>
    <center><font face="Segoe UI"> <ul style="list-style: none;" id="list-all-the-facts-given">

    </ul>


 <script type="text/javascript">
      (function(){
      Parse.initialize("uZXJE7ChTK3XMvs3Nsf8hE5ivHWiGLpEimGAnUp1", "zJ9PQfiin6ZY9FXSqxFvYmuA9uOhsRz64jTWoExL");

      function getInformation() {
       console.log("Hi");
       var query = new Parse.Query( "SomeFacts" );
       query.find({ success: function( results ) {
          var output = "";
          for (var i in results) {
            var theInformation = results[i].get("actualInformation");
            var theSource = results[i].get("actualSources");
            var theHeadline = results[i].get("actualTitle");  
            output += "<li>";
            output += "<div class=\"boxed\">"  
            output += "<font face=\"Arial\"<pre><h2>" + theHeadline + "</h2></pre></font>";
            output += "<p>" + theInformation + "</p>";
            output += "<a href=\"" + "http://" + theSource + "\"" + ">" + "Source: " + "(" + theSource + ")" + "</a>";
            output += "<h5></h5>"  
            output += "</div>";  
            output += "</li>";
          }      
        document.getElementById("list-all-the-facts-given").innerHTML = output;

        }, error: function( error ) {
          alert("There was an error, this error is " + error.message );
        }
      })
     }


          getInformation();

          function doPrompt() {
     var SomeFacts = Parse.Object.extend("SomeFacts");
     var theFacts = new SomeFacts();
     var theHeadline = prompt("Enter title for the information:");      
     var supplyInfo = prompt("Enter information:");      
     var supplySRC = prompt("Enter source:");
     theFacts.set( "actualInformation" , supplyInfo );
     theFacts.set("actualSources", supplySRC);
     theFacts.set("actualTitle", theHeadline);      
     theFacts.save(null, {
       success: function(theFacts) {
           console.log("Objects was saved successfully. Object ID: " + theFacts.id);
       },
       error: function(theFacts, error) {
         alert('Failed to create new object, with error code: ' + error.message);
       }
     })
          }
          doPrompt();
    getInformation();
  })();


    </script></font></center>
<a href="#" class="btn">Add Information</a>
<style type="text/css">
.btn {
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  background: #333;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
    position: fixed;
}

.btn:hover {
  background: #AAA;
  text-decoration: none;
    position: fixed;
}
  </style>

</body>
</html>

I cant seem to make it potion, my button is always on the bottom, do i just have to move the code?
Anthony Mejia
Anthony Mejia
8,840 Points

Try adding top: 0; to your code to fix your button to the top of the window.

You can also remove the position: fixed; on the button hover rule.

Farouk Charkas
Farouk Charkas
1,957 Points
Farouk Charkas
Farouk Charkas
1,957 Points

Thank you so much! I could have not done it without you! :D :)