admin管理员组

文章数量:1391960

I am facing a very strange problem. The problem is that my jQuery just cannot give me the right scroll bottom of the window. I tried things like:

var win = $(window);
var winHeight = win.height();
var winTop = win.scrollTop();
var winBottom = winHeight + winTop;

var win = $(window);
var winHeight = win.height();
var winBottom = winHeight;

But I cannot get the right hight. For example my screen is 900px high and when I am at the top of my page, but jQuery keeps saying it is 3368.

If you want to see more than my jQuery / Javascript code here is my html and css

    <doctype! html>
<html>
<head>
    <!--Give page a title-->
    <title>Code & Design Website</title>
    <!--Link the stylesheet-->
    <link href="homestyle.css" rel="stylesheet" type="text/css">
    <link href='+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <!--Give the site a description-->
    <meta charset="utf-8">
    <meta name="description" content="The official code & Design website">
    <meta name="author" content="Sander from Code & Design">
    <meta name="keywords" content="Code & Design Sander,Code & Design,Code,Design,Sander,Professional website,Professional,website,
    developer,website developer,cheap website,cheap">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Link Scripts-->
    <script src=".11.3.min.js"></script>
    <script src=".11.4/jquery-ui.js"></script>
    <script src="homescript.js"></script>
</head>
<body>
    <nav>
        <div id="navContainer">
            <div id="menuButton"><img id="menuIcon" src="Menu%20Button.png"></div>
            <div id="links">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Buy</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
        <div id="logo">
            <img id="logoImage" src="Logo.png">
            <div id="logoText"><span>Code & Design</span><br>official website</div>
        </div>
        </div>
        <div id="underlineNav"></div>
    </nav>
    <header>
        <div id="containerBackground">
            <!--Header Image-->
        </div>
        <div id="textHeader"><span>Code & Design</span><br>I design and make website's for you</div>
        <div id="containerButtonsHeader">
            <div class="buttonsHeader"><a href=""><span>About</span> me</a></div>
            <div class="buttonsHeader"><a href="">Buy</a></div>
            <div class="buttonsHeader"><a href="">Portfolio</a></div>
        </div>
    </header>
    <div id="services">
        <div id="servicesTitle">
            <p>Services</p>
            <div id="servicesTitleLine"></div>
        </div> 
        <div class="servicesButtons" id="serviceDesign"><img src="pencil.png"></div>
        <div class="servicesButtons" id="serviceCode"><img src="Gear.png"></div>
        <div class="servicesButtons" id="serviceBuy"><img src="530b05efef2d794e7600018e_Flaticon_9691.png"></div>
        <div id="servicesBoxes">
            <div class="servicesList" id="design">
                <div class="arrow"></div>
                <div class="list">
                    <ul>
                        <li><img src="Untitled-1.png">Flat UI Design</li>
                        <li><img src="Untitled-1.png">Clear</li>
                        <li><img src="Untitled-1.png">Full with colors</li>
                    </ul>
                </div>
            </div>
            <div class="servicesList" id="code">
                <div class="arrow"></div>
                <div class="list">
                    <ul>
                        <li><img src="Untitled-1.png">Responsive</li>
                        <li><img src="Untitled-1.png">User friendly</li>
                        <li><img src="Untitled-1.png">Simple</li>
                    </ul>
                </div>
            </div>
            <div class="servicesList" id="purchase">
                <div class="arrow"></div>
                <div class="list">
                    <ul>
                        <li><img src="Untitled-1.png">Cheap</li>
                        <li><img src="Untitled-1.png">Fast</li>
                        <li><img src="Untitled-1.png">Good service</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="portfolio">
        <div id="portfolioTitle">
            <p>Portfolio</p>
            <div id="portfolioTitleLine"></div>
        </div>
        <div id="portfolioItems">
            <div class="portfolioBox"><img src=""></div>
            <div class="portfolioBox"><img src=""></div>
            <div class="portfolioBox"><img src=""></div>
        </div>
        <div id="moreButton">
            <p>See more</p>
        </div>
    </div>
    <div id="buy">
        <div id="buyContainerContent" class="buy">
            <div id="textBuy">
                <span>Buy</span><hr><hr>Do you want a flat design website,<br>then you are in the right place.<br>
                I make modern, and clear website's.<br> The website's I make are simple,<br>user friendly, and responsive<br>
                so every device will fit your website.
            </div>
            <div id="priceTotal" class="buy">
                <div id="priceTitle">Price</div>
                <div id="priceLeft" class="prices">
                    <img src="Untitled-2.png">
                    <div id="priceLeftText">
                        <span>Website</span><br><span>fully functional</span><br><br>
                        I make a website that is fully functional, and ready for hosting<br>(hosting is up to you)<br><br>
                        <span>Price:</span><span> €100.-</span>
                    </div>
                    <div id="orderButtonLeft">Order now</div>
                </div>
                <div id="priceRight" class="prices">
                    <img src="Untitled-3.png">
                    <div id="priceRightText">
                        <span>Template</span><br><span>website layout</span><br><br>
                        If you want to code a website by yourself, but want a already made <br>lay-out<br><br>
                        <span>Price:</span><span> €20.-</span>
                    </div>
                    <div id="orderButtonRight">Order now</div>
                </div>
                <div id="priceLineAbove"></div>
                <div id="priceLineUnder"></div>
            </div>
        </div>
    </div>
    <div id="about">
        <div id="aboutTitle">
            <p>About</p>
            <div id="aboutTitleLine"></div>
        </div> 
        <div id="aboutText">
        25 October 2015<br><br>

Dear visitor,<br><br>

My name is Sander, and I am a fiftheen-year-old website
designer / developer from the Netherlands. I started 
website designing and developing about 6 months ago,
and I really enjoy doing this. But I want this to be more than
a hobby so I stared this website. Now the world can see what
I can do, and also I could sell my work to other people.<br><br>

This was I wanted to share with you, just so you know a bit about me.
If you want to know more feel free to e-mail me.<br><br>

Your faithfully,<br>
Sander Aalbers<br><br>

Motivation quote - “Do not stop untill you are done”
        </div>
    </div>
    <div id="footer">
        <div id="footerContentContainer">
            <div id="contact" class="footer">
                <div id="contactTitle">Contact</div>
                <div id="contactContainer">
                <div id="contactListIcons" class="contact">
                    <ul>
                        <li><img src=youtube17.png></li>
                        <li><img src="google116.png"></li>
                        <li><img src="facebook55.png"></li>
                        <li><img src="email5.png"></li>
                    </ul>
                </div>
                <div id="contactList" class="contact">
                    <div id="contactListContainer">
                        <ul>
                            <li>Code & Design Sander</li>
                            <li>Code & Design Sander</li>
                            <li>Code & Design</li>
                            <li>[email protected]</li>
                        </ul>
                    </div>
                </div>
            </div>
            </div>
            <div id="footerMenu" class="footer">
                <div id="footerMenuTitle">Menu</div>
                <div id="footerMenuList">
                    <ul>
                        <li><a href="">Services</a></li>
                        <li><a href="">Portfolio</a></li>
                        <li><a href="">Buy</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="underlineContactMenu"></div>
        <div id="footerLogo">
            <img class="footerLogo" src="Logo.png">
            <div id="footerLogoText" class="footerLogo">
                © 2015 Code & Design™<br>
               <span>“Do not stop until you are done”</span> 
            </div>
        </div>
    </div>
</body>
</html>

I hope someone can fix this for me. Thanks in advance!:D

I am facing a very strange problem. The problem is that my jQuery just cannot give me the right scroll bottom of the window. I tried things like:

var win = $(window);
var winHeight = win.height();
var winTop = win.scrollTop();
var winBottom = winHeight + winTop;

var win = $(window);
var winHeight = win.height();
var winBottom = winHeight;

But I cannot get the right hight. For example my screen is 900px high and when I am at the top of my page, but jQuery keeps saying it is 3368.

If you want to see more than my jQuery / Javascript code here is my html and css

    <doctype! html>
<html>
<head>
    <!--Give page a title-->
    <title>Code & Design Website</title>
    <!--Link the stylesheet-->
    <link href="homestyle.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis./css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
    <!--Give the site a description-->
    <meta charset="utf-8">
    <meta name="description" content="The official code & Design website">
    <meta name="author" content="Sander from Code & Design">
    <meta name="keywords" content="Code & Design Sander,Code & Design,Code,Design,Sander,Professional website,Professional,website,
    developer,website developer,cheap website,cheap">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--Link Scripts-->
    <script src="http://code.jquery./jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery./ui/1.11.4/jquery-ui.js"></script>
    <script src="homescript.js"></script>
</head>
<body>
    <nav>
        <div id="navContainer">
            <div id="menuButton"><img id="menuIcon" src="Menu%20Button.png"></div>
            <div id="links">
                <ul>
                    <li><a href="">Home</a></li>
                    <li><a href="">Services</a></li>
                    <li><a href="">Portfolio</a></li>
                    <li><a href="">Buy</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </div>
        <div id="logo">
            <img id="logoImage" src="Logo.png">
            <div id="logoText"><span>Code & Design</span><br>official website</div>
        </div>
        </div>
        <div id="underlineNav"></div>
    </nav>
    <header>
        <div id="containerBackground">
            <!--Header Image-->
        </div>
        <div id="textHeader"><span>Code & Design</span><br>I design and make website's for you</div>
        <div id="containerButtonsHeader">
            <div class="buttonsHeader"><a href=""><span>About</span> me</a></div>
            <div class="buttonsHeader"><a href="">Buy</a></div>
            <div class="buttonsHeader"><a href="">Portfolio</a></div>
        </div>
    </header>
    <div id="services">
        <div id="servicesTitle">
            <p>Services</p>
            <div id="servicesTitleLine"></div>
        </div> 
        <div class="servicesButtons" id="serviceDesign"><img src="pencil.png"></div>
        <div class="servicesButtons" id="serviceCode"><img src="Gear.png"></div>
        <div class="servicesButtons" id="serviceBuy"><img src="530b05efef2d794e7600018e_Flaticon_9691.png"></div>
        <div id="servicesBoxes">
            <div class="servicesList" id="design">
                <div class="arrow"></div>
                <div class="list">
                    <ul>
                        <li><img src="Untitled-1.png">Flat UI Design</li>
                        <li><img src="Untitled-1.png">Clear</li>
                        <li><img src="Untitled-1.png">Full with colors</li>
                    </ul>
                </div>
            </div>
            <div class="servicesList" id="code">
                <div class="arrow"></div>
                <div class="list">
                    <ul>
                        <li><img src="Untitled-1.png">Responsive</li>
                        <li><img src="Untitled-1.png">User friendly</li>
                        <li><img src="Untitled-1.png">Simple</li>
                    </ul>
                </div>
            </div>
            <div class="servicesList" id="purchase">
                <div class="arrow"></div>
                <div class="list">
                    <ul>
                        <li><img src="Untitled-1.png">Cheap</li>
                        <li><img src="Untitled-1.png">Fast</li>
                        <li><img src="Untitled-1.png">Good service</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="portfolio">
        <div id="portfolioTitle">
            <p>Portfolio</p>
            <div id="portfolioTitleLine"></div>
        </div>
        <div id="portfolioItems">
            <div class="portfolioBox"><img src=""></div>
            <div class="portfolioBox"><img src=""></div>
            <div class="portfolioBox"><img src=""></div>
        </div>
        <div id="moreButton">
            <p>See more</p>
        </div>
    </div>
    <div id="buy">
        <div id="buyContainerContent" class="buy">
            <div id="textBuy">
                <span>Buy</span><hr><hr>Do you want a flat design website,<br>then you are in the right place.<br>
                I make modern, and clear website's.<br> The website's I make are simple,<br>user friendly, and responsive<br>
                so every device will fit your website.
            </div>
            <div id="priceTotal" class="buy">
                <div id="priceTitle">Price</div>
                <div id="priceLeft" class="prices">
                    <img src="Untitled-2.png">
                    <div id="priceLeftText">
                        <span>Website</span><br><span>fully functional</span><br><br>
                        I make a website that is fully functional, and ready for hosting<br>(hosting is up to you)<br><br>
                        <span>Price:</span><span> €100.-</span>
                    </div>
                    <div id="orderButtonLeft">Order now</div>
                </div>
                <div id="priceRight" class="prices">
                    <img src="Untitled-3.png">
                    <div id="priceRightText">
                        <span>Template</span><br><span>website layout</span><br><br>
                        If you want to code a website by yourself, but want a already made <br>lay-out<br><br>
                        <span>Price:</span><span> €20.-</span>
                    </div>
                    <div id="orderButtonRight">Order now</div>
                </div>
                <div id="priceLineAbove"></div>
                <div id="priceLineUnder"></div>
            </div>
        </div>
    </div>
    <div id="about">
        <div id="aboutTitle">
            <p>About</p>
            <div id="aboutTitleLine"></div>
        </div> 
        <div id="aboutText">
        25 October 2015<br><br>

Dear visitor,<br><br>

My name is Sander, and I am a fiftheen-year-old website
designer / developer from the Netherlands. I started 
website designing and developing about 6 months ago,
and I really enjoy doing this. But I want this to be more than
a hobby so I stared this website. Now the world can see what
I can do, and also I could sell my work to other people.<br><br>

This was I wanted to share with you, just so you know a bit about me.
If you want to know more feel free to e-mail me.<br><br>

Your faithfully,<br>
Sander Aalbers<br><br>

Motivation quote - “Do not stop untill you are done”
        </div>
    </div>
    <div id="footer">
        <div id="footerContentContainer">
            <div id="contact" class="footer">
                <div id="contactTitle">Contact</div>
                <div id="contactContainer">
                <div id="contactListIcons" class="contact">
                    <ul>
                        <li><img src=youtube17.png></li>
                        <li><img src="google116.png"></li>
                        <li><img src="facebook55.png"></li>
                        <li><img src="email5.png"></li>
                    </ul>
                </div>
                <div id="contactList" class="contact">
                    <div id="contactListContainer">
                        <ul>
                            <li>Code & Design Sander</li>
                            <li>Code & Design Sander</li>
                            <li>Code & Design</li>
                            <li>[email protected]</li>
                        </ul>
                    </div>
                </div>
            </div>
            </div>
            <div id="footerMenu" class="footer">
                <div id="footerMenuTitle">Menu</div>
                <div id="footerMenuList">
                    <ul>
                        <li><a href="">Services</a></li>
                        <li><a href="">Portfolio</a></li>
                        <li><a href="">Buy</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="underlineContactMenu"></div>
        <div id="footerLogo">
            <img class="footerLogo" src="Logo.png">
            <div id="footerLogoText" class="footerLogo">
                © 2015 Code & Design™<br>
               <span>“Do not stop until you are done”</span> 
            </div>
        </div>
    </div>
</body>
</html>

I hope someone can fix this for me. Thanks in advance!:D

  • javascript
  • jquery
  • html
  • css
Share Improve this question edited Nov 18, 2015 at 18:46 user229044♦ 240k41 gold badges344 silver badges346 bronze badges asked Nov 15, 2015 at 19:34 FlyingUnderpantsFlyingUnderpants 1011 gold badge3 silver badges12 bronze badges 2
  • Please clarify what you mean by window bottom? – George Mauer Commented Nov 15, 2015 at 19:39
  • the bottom of what is viewed on the screen of the content – FlyingUnderpants Commented Nov 18, 2015 at 18:47
Add a ment  | 

4 Answers 4

Reset to default 3

Brace yourself – you are about to see a miraculous transformation :)

At the very top of your HTML, replace <doctype! html> with <!doctype html>.

That's it. Have a nice evening :)))

(Technical footnote: The broken doctype has put the browser in quirks mode, and jQuery doesn't support quirks mode.)

The bottom of the window is just $(window).height(); and the bottom of the document is just $(document).height();

It sounds like there's some confusion around what coordinate you're trying to get, but my guess is you're after the position of the bottom of the window in document coordinates, such that you can understand what content is visible given the user's current scroll position.

If this is the case, the bottom of the visible portion of the document can be had simply by adding the window's height to the top of the visible portion, which you already know is scrollTop.

Here's a little demo of adding $(window).scrollTop() and $(window).height() together. A green line is placed near this location a few times a second in this demo, so you can see it coincides with the bottom of the current view anytime it is updated.

function update() {
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();
  var viewBottom = scrollTop + windowHeight;
  $('#hud').text('windowHeight = ' + windowHeight +
                 ', scrollTop = ' + scrollTop +
                 ', viewBottom = ' + viewBottom);
  $('#line').css('top', (viewBottom - 20) + 'px');
}

window.setInterval(update, 120);
#scrollable {
  opacity: 0.3;
  font-size: 150px;
  white-space: pre;
  font-family: sans-serif;
}
#hud {
  position: fixed;
  top: 20px;
  left: 20px;
}
#line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: green;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="scrollable">  1
  2
  3
  4
  5
  6
  7
  8
  9
</div>
<div id="hud"></div>
<div id="line"></div>

Here is also the CSS code:

    @import url('http://fonts.googleapis./css?family=Open+Sans');

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: ebebeb;
    overflow-x: hidden;
}
/*Navigation bar*/
nav {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 60px;
    background-color: #1b1f28
}
/*Styling links*/
#links ul {
    position: absolute;
    margin-left: -40px;
    margin-top: 17px;
    width: 600px;
}

#links li {
    list-style: none;
    display: inline-block;
    margin-left: 30px;
}

#links li a {
    text-decoration: none;
    color: #9099af;
    font-size: 15pt;
}

#menuButton {
    display: none;
}

/*Reponsive Nav*/
@media screen and (max-width: 860px) {
    #links {
        position: absolute;
        width: 100%;
        height: 350px;
        background-color: #ebebeb;
        margin-left: 50%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%); 
        margin-top: -350px;
    }  

    #links li {
        text-align: center;
        display: block;
        width: 90%;
        height: 40px;
        margin-top: 10px;
        border-bottom: 1px solid lightgray;
        margin-left: 50%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);  
    }

    #links li:last-child {
        border-bottom: none;
    }

    #links ul {
        width: 100%;  
    }

    #menuButton {
        display: block;
        position: relative;
        float: left;
    }

    #menuButton img {
        position: absolute;
        height: 30px;
        width: 0 auto;
        margin-top: 15px;
        margin-left: 15px;
    }
}
/*Logo navigation bar*/
#logoText {
    color: white;
    float: right;
    font-style: italic;
    text-align: right;
    line-height: 23px;
    margin-top: 7px;
    margin-right: 10px;
}

#logoText span {
    font-weight: 700;
    font-size: 15pt;
    font-style: normal;
}


#logoImage {
    float: right;
    height: 50px;
    width: 0 auto;
    margin-top: 5px;
    margin-right: 10px;
}

#underlineNav {
    position: absolute;
    width: 100%;
    height: 3px;
    margin-top: 60px;
    background-color: white;
}

header {

}
/*Header with introduction*/
#containerBackground {
    overflow: hidden;
    height: 600px;
    background-image: url(http://www.desktopwallpapers4.me/wallpapers/world/1920x1080/1/4948-foggy-chicago-1920x1080-world-wallpaper.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#backgroundHeader {
    width: 100%;
    height: 0 auto;
    margin-top: -200px; 
}

#textHeader {
    width: 700px;
    text-align: center;
    color: white;
    position: absolute;
    margin-top: -470px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    font-size: 30pt;
    font-weight: 200;
    line-height: 50px
}

#textHeader span {
    font-weight: 600
}

#containerButtonsHeader {
    margin-top: -340px;
    text-align: center;
    width: 800px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
}
/*Buttons / links of the header*/
.buttonsHeader {
    position: relative;
    text-align: center;
    line-height: 50px;
    display: inline-block;
    width: 170px;
    height: 50px;
    border: 4px solid white;
    border-radius: 20px;
    margin: 10px;
}

.buttonsHeader a {
    text-decoration: none;
    color: white;
}

.buttonsHeader:nth-child(2) {
    background-color: #236de9
}


@media screen and (max-width: 650px){
    #textHeader {
        width: 100%;
        margin-top: -700px;
    }

    .buttonsheader {
        display: block;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        margin-top: 20px;

    }

    #containerButtonsHeader {
        margin-top: -490px;
    }

    #containerBackground {
        height: 800px    
    }
}

/*Serivce Icon circles*/
#services {
    text-align: center;
    width: 1100px;
    height: 600px;
    background-color: white;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 100px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(197, 197, 197, 1);
    box-shadow:         0px 5px 0px 0px rgba(197, 197, 197, 1);
}

#servicesTitle {
    margin-top: -27px;
    height: 60px;
    background-color: #1b1f28;
    color: white;
    font-size: 20pt;
    line-height: 57px;
    font-weight: 200;
}

#servicesTitleLine {
    margin-top: -54px;
    height: 1px;
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    background-color: white;
}

#servicesTitle p {
    width: 150px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    position: relative;
    background-color: #1b1f28;
    z-index: 1;
}

.servicesButtons {
    width: 180px;
    height: 180px;
    display: inline-block;
    border-radius: 100%;
    background-color: #236de9;
    margin: 50px;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(0, 64, 171, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(0, 64, 171, 1);
    box-shadow:         0px 5px 0px 0px rgba(0, 64, 171, 1);
}

.servicesButtons img {
    width: 110px;
    height: 110px;
    margin-top: 50%;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
}

/*About the services*/
#servicesBoxes {
    text-align: center;
    margin-top: 15px;
}
.servicesList {
    display: inline-block;
    text-align: left;
    width: 250px;
    height: 150px;
    background-color: #1b1f28;
}

.servicesList ul {
    list-style: none;
    color: white;
    margin-top: 20px;
    font-size: 15pt
}

.servicesList img {
    background-color: #1b1f28;
    margin-right: 15px;
    margin-top: 10px
}

.servicesList:nth-child(2) {
    margin-left: 35px;
    margin-right: 35px;
}

.arrow {
    width: 0px;
    height: 0px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid #1b1f28;
    margin-top: -30px;
    margin-left: 110px;
}

@media screen and (max-width: 1100px) {
    #services {
        width: 90%;
        height: 1400px;
    }

    #servicesBoxes {
        margin-left: 50%; 
        transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        width: 250px
    }

    #design {
        margin-top: -870px;
        width: 90%;  
    }

    #design ul {
        margin-left: -15px;
    }

    #code {
        margin-top: -440px;
        width: 90%;  
        margin-left: 50%; 
        transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }

    #code ul {
        margin-left: -15px;
    }

    #purchase {
        margin-top: -10px;
        width: 90%;  
    }

    #purchase ul {
        margin-left: -15px;
    }

    .arrow {
        margin-left: 50%;
        transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);    
    }

    .servicesButtons:nth-child(3), .servicesButtons:nth-child(4) {
        margin-top: 250px;   
    }

    .servicesButtons {
        display: block;
        position: relative;
        margin-left: 50%;
        transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);    
    }

}

/*Portofio Container*/
#portfolio {
    text-align: center;
    width: 1100px;
    height: 500px;
    background-color: white;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(197, 197, 197, 1);
    box-shadow:         0px 5px 0px 0px rgba(197, 197, 197, 1);
}

#portfolioTitle {
    margin-top: -27px;
    height: 60px;
    background-color: #1b1f28;
    color: white;
    font-size: 20pt;
    line-height: 57px;
    font-weight: 200;
}

#portfolioTitleLine {
    margin-top: -54px;
    height: 1px;
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    background-color: white;
}

#portfolioTitle p {
    width: 150px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    position: relative;
    background-color: #1b1f28;
    z-index: 1;
}

/*Styling Items inside the portfolio*/
.portfolioBox {
    width: 220px;
    height: 220px;
    display: inline-block;
    margin: 40px;
    border-radius: 20px;
    border: 10px solid #236de9;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(0, 64, 171, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(0, 64, 171, 1);
    box-shadow:         0px 5px 0px 0px rgba(0, 64, 171, 1);
    background-color: #002b74;
    overflow: hidden;
}

/*See more buttons styling*/
#moreButton {
    text-align: center;
    border: 3px solid black;
    width: 150px;
    height: 40px;
    border-radius: 30px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 20px
}

#moreButton p {
    margin-top: 0;
    line-height: 40px;
}

/*Styling image inside portfolio*/
.portfolioBox img {
    width: 380px;
    height: 0 auto;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: -1px;
}

@media screen and (max-width: 1100px){
    #portfolio {
        width: 90%;
        height: 1100px;
    }

    .portfolioBox {
        display: block;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }
}
/*Styling buy tab*/
#buy {
    width: 100%;
    height: 610px;
    background-color: #236de9;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(0, 64, 171, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(0, 64, 171, 1);
    box-shadow:         0px 5px 0px 0px rgba(0, 64, 171, 1);
    margin-top: 50px;
    color: white;
}

#buyContainerContent {
    position: relative;
    width: 1400px;
    height: 1400px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);

}

#textBuy {
    float: left;
    line-height: 35px;
    font-size: 15pt;
    font-weight: 300;
    margin-left: 200px;
    margin-top: 50px;
}

#textBuy span {
    font-size: 20pt;
    font-weight: 400;
}

hr {
    visibility: hidden;
    margin-bottom: -5px;
}

#priceTotal {
    float: right;
    margin-right: 200px;
    margin-top: 50px;
    text-align: center;
}

#priceTitle {
    font-size: 20pt;
    font-weight: 400;   
    text-align: left !important;
    margin-left: 30px;
}

.prices {
    display: inline-block;
    width: 200px;
    margin: 20px;
}

#priceRight img, #priceLeft img {
    margin-bottom: 30px;
}

#orderButtonRight, #orderButtonLeft {
    margin-top: 50px;
}

#priceRightText span, #priceLeftText span {
    font-size: 20pt;
    font-weight: 500;
}

#priceRightText span:nth-of-type(2), #priceLeftText span:nth-of-type(2) {
    font-weight:  200;
    font-style: italic;
    font-size: 15pt
}

#priceRightText span:nth-of-type(4), #priceLeftText span:nth-of-type(4) {
    font-weight: 200;
    font-style: italic;
}

#priceLineAbove {
    height: 2px;
    background-color: white;
    margin-top: -265px
}

#priceLineUnder {
    height: 2px;
    background-color: white;
    margin-top: 260px 
}

#orderButtonRight, #orderButtonLeft {
    width: 200px;
    height: 50px;
    position: absolute;
    border-radius: 50px;
    border: 5px solid white;
    background-color: #0040ab;
    line-height: 50px;
    font-size: 15pt
}

@media screen and (max-width: 1020px) {
    #textBuy, #priceTotal {
        float: none;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        text-align: center;
    }

    #priceTotal {
        margin-top: 100px;    
    }

    #textBuy {
        position: relative;
        top: 50px;
        width: 100%;  
    }

    #buy {
        height: 920px;
    }   
}

@media screen and (max-width: 510px){
    #priceTitle {
        width: 62px;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }

    .prices {
        display: block;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }

    .prices:nth-child(3) {
        margin-top: 150px;    
    }

    #priceLineAbove, #priceLineUnder {
        display: none
    }

    #orderButtonLeft, #orderButtonRight {
        margin-top: 20px
    }

    #buy {
        height: 1400px;
    }
}
/*About*/
#about {
    text-align: center;
    width: 1100px;
    height: 520px;
    background-color: white;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 0px 0px rgba(197, 197, 197, 1);
    -moz-box-shadow:    0px 5px 0px 0px rgba(197, 197, 197, 1);
    box-shadow:         0px 5px 0px 0px rgba(197, 197, 197, 1);
}

#aboutTitle {
    margin-top: -27px;
    height: 60px;
    background-color: #1b1f28;
    color: white;
    font-size: 20pt;
    line-height: 57px;
    font-weight: 200;
}

#aboutTitleLine {
    margin-top: -54px;
    height: 1px;
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    background-color: white;
}

#aboutTitle p {
    width: 150px;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    position: relative;
    background-color: #1b1f28;
    z-index: 1;
}

#aboutText {
    text-align: left;
    width: 80%;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    margin-top: 25px;
    font-size: 14pt;
}

@media screen and (max-width: 1100px) {
    #about {
        width: 90%;
        height: auto;
    }

    #aboutText {
        margin-bottom: 20px;
    }
}
/*Footer*/
#footerContentContainer {
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%); 
    width: 800px;
}

#footer {
    margin-top: 50px;
    background-color: #1b1f28;
    color: white;
    width: 100%;
    height: 500px;
}

.contact {
    display: inline-block;
    margin-top: 35px;
}

.footer {
    display: inline-block;
    margin-left: 70px;
    margin-right: 70px;
}

.footer ul li {
    list-style: none;    
} 

#contact {
    text-align: left;
}

#contactListIcons img {
    max-height: 30px;
    max-width: 30px;
    margin-top: 10px;
}

#contactListContainer {
    position: relative;
    top: -10px; 
}

#contactList li{
    margin-top: 22px;
}

#footerMenu {
    text-align: center;
    position: relative;
    top: 33px;
}

#footerMenuTitle, #contactTitle {
    font-size: 16pt;
    text-align: center;
}

#footerMenuTitle {
    margin-left: 40px
}

#footerMenu a {
    color: #727a8d;
    text-decoration: none;
}

#footerMenu li {
    margin-top: 22px;
}

#footerMenu ul {
    margin-top: 55px;
}

/*Underline Menu and Contact*/
#underlineContactMenu {
    position: absolute;
    width: 600px;
    height: 2px;
    background-color:white;
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%); 
    margin-top: -230px;
}

/*Footer Logo*/
.footerLogo {
    display: inline-block;
}

#footerLogo img{
    height: 50px;
    width: 0 auto;
}

#footerLogoText {
    position: relative;
    top: -8px;
    font-weight: 500;
    text-align: left;
    margin-left: 10px;
}

#footerLogoText span{
    font-weight: 200;
    font-style: italic;
    font-size: 10pt
}

#footerLogo {
    margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%); 
    text-align: center;
    margin-top: 100px;
}

@media screen and (max-width: 630px) {
    .footer {
        display: block;
    }

    #footerMenuTitle {
        margin-bottom: -40px;
        margin-left: 50%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%); 
    }

    #footerMenuList {
        margin-left: 44%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%); 
    }

    #footerMenu {
         margin-left: 50%;
        transform: translate(-50%);
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);    
    }

    #underlineContactMenu {
        display: none;
    }

    #contact {
        position: relative;
        top: 30px;
    }

    #contactContainer {
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
        width: 400px;
        margin-top: -40px;
        margin-bottom: 30
    }

    #footer {
        height: 740px;   
    }
}

@media screen and (max-width: 490px) {

    #footerLogoText {
        margin-top: 15px;
        width: 182px;
        margin-left: 50%;
    transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    }
}

本文标签： javascriptGet window bottom of what is viewedStack Overflow

版权声明：本文标题：javascript - Get window bottom of what is viewed - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744766059a2624047.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。