javascript - 固定位置と %width + フッターに重ならないようにする

Question

左側に画像を表示するグリッド (幅: 65%) と右側にプロジェクトに関する情報を表示する別のグリッド (幅 35%) の 2 つのグリッドのプロジェクトページがあります。

ライブプレビューへのリンクは次のとおりです。http://meeped.co.uk:93/portfolio/ambition-world.html

右側にある情報グリッドを固定してページとともにスクロールするように変更するには? フッターに到達する前に停止します。

注: 位置を Fixed に変更しようとしましたが、スクロールしますが、グリッド幅はページと共に伸び続け、1030px であるページの幅をオーバーフローします。

スクロールしてフッターで停止するように多くの JavaScript スニペットを試しましたが、どれも機能しませんでした。あなたは何をお勧めします？プラグインを使用せずに。

ページの HTML は次のとおりです。

        <!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8" /

        <meta name="viewport" id="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=10.0, initial-scale=1.0" />

        <link rel="stylesheet" type="text/css" href="../assets/css/reset.css">
        <link rel="stylesheet" type="text/css" href="../assets/css/core.css">
        <link rel="stylesheet" type="text/css" href="../assets/css/fixes.css">
        <link rel="stylesheet" type="text/css" media="screen and (max-width : 1030px)" href="../assets/css/tablets-landscape.css"/>
        <link rel="stylesheet" type="text/css" media="screen and (max-width : 770px)" href="../assets/css/tablets-portrait.css"/>
        <link rel="stylesheet" type="text/css" media="screen and (max-width : 500px)" href="../assets/css/phone.css"/>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
    </head>

    <body>
        <!--Header--><header>
            <div id="headerWrapper">
                <div id="headerContent">

                    <div id="headerLogo">
                        <a href="../index.html"><img src="../assets/elements/logo.png"/></a>
                    </div>

                    <nav><ul id="mainMenu" class="snapjs-expand-left">
                        <li><a href="../index.html">Home</a></li>
                        <li><a href="../portfolio.html">Portfolio</a>
                        <li><a href="../about.html">About Me</a></li>
                        <li><a href="../contact.html">Contact Me</a></li>
                        <li><a href="../blog.html">Blog</a></li>
                    </ul></nav>

                </div>
            </div>
        </header>

        <!--Website Content--><div id="Page">       

            <div id="secondHeader">
                <a class="secondHeader-menuButton" href="#">Menu</a>
                <p id="logo-smallScreen">LOAI Design Studio</p>
            </div>

            <div class="wrapperB">
                <div id="portfolio-projectPage" class="content">

                    <div class="imagesGrid">    


                        </div>

                    </div>  
                </div>
            </div>

            <!--Footer Section--><footer>
            <div id="footer-sectionA">
                <div class="footerContent">
                    <h3><strong>Want to get started?</strong></h3>
                    <p>I offer free, no-obligation consultation, will review your project <br> &amp; discuss ways to achieve your goals within your budget &amp; time frame.</p>
                    <p><a target="_blank" href="http://www.vcita.com/meeting_scheduler?o=YnV0dG9u&amp;s=http%3A%2F%2Fwww.loaidesign.co.uk%2F&amp;v=1afd868e">Schedule an Appointment Now</a></p>
                </div>
            </div>          
            <div id="footer-sectionB">
                <div class="footerContent">
                    <p>Copyright ©2012 LOAI Design Studio. <br> All rights reserved.<a href="../terms-and-conditions.html">Terms &amp; Conditions.</a></p>
                </div>
            </div>
            </footer>
        </div><!--The End Of The Page-->

        <!--Scripts Links-->
        <script type="text/javascript" src="../assets/libraries/jquery.js"></script>
        <script type="text/javascript" src="../assets/js/slider.js"></script>
        <script type="text/javascript" src="../assets/js/main.js"></script>
        <script src="../assets/libraries/modernizr.js"></script>
        <!--GoSquared Scripts-->
        <script type="text/javascript">
          var GoSquared = {acct: "GSN-035800-K"};
          (function(w){
            function gs(){
              w._gstc_lt = +new Date;
              var d = document, g = d.createElement("script");
              g.type = "text/javascript";
              g.src = "http://d1l6p2sc9645hc.cloudfront.net/tracker.js";
              var s = d.getElementsByTagName("script")[0];
              s.parentNode.insertBefore(g, s);
            }
            w.addEventListener ? w.addEventListener("load", gs, false) : w.attachEvent("onload", gs);
          })(window);
        </script>

    </body>
</html>

CSS

     /*Portoflio Project Page*/
     #portfolio-projectPage{
text-align: left;
position: relative;
       }

    .imagesGrid, .detailsBox  {
display: inline-block;
vertical-align: top;
      }

    .imagesGrid {
    width: 65%;
}

.imagesGrid img{
    border: 1px solid #E8E8E8;
    margin-bottom: 10px;
}                                           

.imagesGrid p {
    border-top: 1px solid #E8E8E8;
    padding-top: 8px;
    margin: 10px 0;
}   

.imagesGrid p:first-of-type {
    border-top: none;
    padding: 0 0 10px 0;
    margin: 0;
}   

    .detailsBox {
    width: 35%;
    margin-top: 28px;
    padding-left: 45px;
}

.detailsBox p {
    border-bottom: 1px solid #E8E8E8;
    padding-bottom: 10px;
    margin: 10px 0;
}   

.detailsBox p, h3 {
    vertical-align: bottom;
}

.detailsBox a {
    vertical-align: middle;
}       

.detailsBox p:last-of-type {
    border-bottom: 3px solid #E8E8E8;
    margin: 0;
}   

.detailsBox div {
    background-color: #F5F5F5;
    padding: 15px 0;
    text-align: center;

    border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
}

.detailsBox div a{
    background-color: #E8E8E8;
    padding: 10px 14px;
    cursor: pointer;

    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.detailsBox div a:hover{
    color: #FFFFFF;
    background-color: #456087;
}

.detailsBox div br {
    display: none;
}

.shareButtons a {
        margin-left: 3px;

        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }

.shareButtons a span {
        display: none;
    }

また、ここに私が使用しているJSがあります：

//Scroll-up button// 
$(window).scroll(function(){ 
    if ($(this).scrollTop() > 100) { 
      $('.scrollup').fadeIn(); 
    } 
    else { 
      $('.scrollup').fadeOut(); 
    } 
 }); 
$('.scrollup').click(function(){ 
    $("html, body").animate({ scrollTop: 0 }, 600); return false; 
});

score 0 · Accepted Answer

したがって、問題は、追加するposition:fixed;ことで、サイドバーをビューポートに対して相対的に配置していることです (これは、固定配置が機能する方法です)。これは、position:fixed;要素の幅が常にビューポートの幅に対して相対的であることを意味します。

これを回避するには、サイドバーアイテムに新しいラッパー要素を導入し、サイドバーが通常の位置にとどまるように、この新しい要素を配置します。fixed

これを行う方法の例を次に示します...ユーザーが過去にスクロールしたらラッパーを追加し（ただし、ラッパーがまだ存在しない場合のみ）、スクロールして戻ったらラッパーを削除します（ただし、存在します）。

したがって、JS に以下を含めることができます。

$(window).scroll(function(){ 
  if ($(this).scrollTop() > 100) { 
    $('.scrollup').fadeIn();
    if ($('.fixie').length == 0) {
      $('.detailsBox').wrap('<div class="fixie" />');
    }
  } 
  else { 
    $('.scrollup').fadeOut(); 
    if ($('.fixie').length != 0) {
      $('.detailsBox').unwrap('<div class="fixie" />');
    }
  } 
});

次に、CSS で固定配置を行うことができます。

.fixie {
    width:1030px;
    position:fixed;
    top:100px; /* or however much you want */
    left:50%;
    margin-left:-515px;
    /* these two lines center the wrapper */
    padding:0 20px; /* to match the replaced wrapper */
}

.detailsBox {
    float:right;
}

.imagesGrid {
    float:left;
}

これはうまくいくはずです:)

javascript - 固定位置と %width + フッターに重ならないようにする

1 に答える 1

Related

Reference