2014-11-21 67 views
3

我正在使用multiscroll.js jquery插件(https://github.com/alvarotrigo/multiscroll.js)。
它工作得很好。但是,在某個瀏覽器寬度下,它會崩潰。所以我希望它被「禁用」,並在瀏覽器寬度後顯示每個部分的一側。

喜歡這個頁面上例如
http://www.reverzo.tymberry.com/
使用媒體查詢將兩個部分變成一個

這裏是小提琴http://jsfiddle.net/929u1za0/

我可憐的企圖:
HTML

<div id="myContainer"> 

    <div class="ms-left"> 
     <!-- Section 1 left --> 
     <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);"> 
      <div class="ms-section-content"> 
       <h1>Section 1 left</h1> 
      </div><!-- /.ms-section-content --> 
     </div><!-- /.ms-section --> 

     <!-- Section 2 left --> 
     <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);"> 
     <div class="ms-section-content"> 
      <h1>Section 2 left</h1> 
     </div><!-- /.ms-section-content --> 
     </div><!-- /.ms-section --> 
    </div><!-- /.ms-left --> 

    <div class="ms-right"> 
     <!-- Section 1 right --> 
     <div class="ms-section section1 ms-table active" data-anchor="first" style="height: 100%; background-color: rgb(255, 255, 255);"> 
     <div class="ms-section-content"> 
      <div class="ms-section-content"> 
       <h1>Section 1 right</h1> 
      </div><!-- /.ms-section-content --> 
     </div><!-- /.ms-section --> 

     <!-- Section 2 right --> 
     <div class="ms-section section2 ms-table" data-anchor="second" style="height: 100%; background-color: rgb(255, 255, 255);"> 
      <div class="ms-section-content"> 
       <h1>Section 2 right</h1> 
      </div><!-- /.ms-section-content --> 
     </div><!-- /.ms-section --> 
    </div><!-- /.ms-right --> 
</div><!-- #myContainer --> 

CSS

/** 
* multiscroll 0.0.6 Beta 
* https://github.com/alvarotrigo/multiscroll.js 
* MIT licensed 
* 
* Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo 
*/ 
.ms-section { 
    position: relative; 
    @include box-sizing(border-box); 
} 

.ms-section.ms-table{ 
    display: table; 
    width: 100%; 
} 

.ms-tableCell { 
    display: table-cell; 
    vertical-align: middle; 
    width: 100%; 
    height: 100%; 
} 

.ms-easing { 
    @include transition(all 0.7s ease-out); 
} 

/* Custom styles */ 
.ms-section { 
    text-align: center; 
} 

/* The media query */ 
@media screen and (max-width: 700px) { 
    .ms-section section2 { 
     display: none; 
    } 
} 

我很感激任何幫助!謝謝!!

UPDATE: 爲什麼不能正常顯示左側部分1和右側部分2?

 @media screen and (max-width: 700px) { 
      .ms-left .section1, 
      .ms-right .section2 { 
       width: 100% !important; 
      } 
     } 
+1

有,輪流每個部分的兩側爲全角部分的選項。 [在此演示](http://alvarotrigo.com/multiScroll/extensions/responsive-expand.html)。 – Alvaro 2017-04-24 11:58:41

+0

這很好知道!謝謝! – Schwesi 2017-04-24 18:48:31

回答

3

必須更新媒體查詢:

@media screen and (max-width: 700px) { 
    .ms-left, .ms-right { 
     width: 100% !important; 
    } 
} 

小提琴:http://jsfiddle.net/929u1za0/1/

+0

工程就像一個迷人的!非常感謝!!! – Schwesi 2014-11-21 19:14:31

+1

很高興聽到這個,歡迎您! – emmanuel 2014-11-21 19:15:16

+0

您是否還可以告訴我如何更改媒體查詢,如果我想要顯示第1部分的權限然後第2部分離開等等? – Schwesi 2014-11-21 19:19:59