1

皆さんはすでに私を大いに助けてくれました。この質問で私を助けてくれることを願っています.

これはこれまでの私のウェブサイトです: http://stilld.nl/test/

すべてがうまく機能しています (ただし、私のコードでは多くの整理が必要です)。

ポートフォリオ部分までスクロールしてください。項目をクリックすると、詳細がポートフォリオの下に表示されます。完全！

問題: ブラウザのサイズをモバイル フォーマットに合わせます。ポートフォリオ アイテムをクリックします。私のポートフォリオ項目が互いの下に表示されるようになったので、下に十分にスクロールしません。彼らは今より多くの垂直方向のスペースを占めています!

私が欲しいもの: コードをレスポンシブにする方法はありますか? たとえば、画面サイズが 600 ピクセルより小さい場合、クリックすると 500 ピクセル下にスライドします。

これは私が今使っているコードです:

$(document).ready(function(){
$(".portfolio").click(function () {
    if ($('#'+$(this).attr('target')).is(':visible')){
        $('#'+$(this).attr('target')).slideUp();        
    } else {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, 600);
    }

});
$(".close").click(function () {
    $('.description').slideUp();        
    $('html, body').animate({scrollTop: $('#p_img').offset().top }, 600);
});

});

4

2 に答える 2

1

offsetjQuery の.offset()または jQuery の.position()で計算する必要があります。

たとえば、次のことができます。

$(".portfolio").click(function () {    

    var offSetTarget = $('.description').position().top;
    var scrollExtra = 0;

    $('body').animate({
        scrollTop: offSetTarget + scrollExtra

    }, 600);
});

extraスクロールする量を決定できる場所。

たとえば、 のすぐ上をスクロールする場合は.portfolio、次を追加できますscrollExtra = -10;。または、途中までスクロールしたい場合は、次のようにします。scrollExtra = $('.portfolio').height()/2;

HEREで実際に使用できる例を用意しました。

実際に機能することを証明するために、ここでウィンドウサイズをいじることができます。

それがあなたの質問に答えることを願っています。幸運を！

アップデート

あなたの例にそれを実装するには、スクロールする場所を決定する必要があります。

説明のために、この例では div#alldescriptionsを使用してこれを行うことにしました#port_img1。

Web サイトの jQuery は次のようになります。

$(document).ready(function() {
  $(".portfolio").click(function () {

    var offSetTarget = $('#alldescriptions').position().top;
    var scrollExtra = 0;

    if ($('#'+$(this).attr('target')).is(':visible')){
        $('#'+$(this).attr('target')).slideUp();        
    } else {
        $('.description').slideUp(); 
        $('#'+$(this).attr('target')).slideDown();        
        $('body').animate({scrollTop: offSetTarget + scrollExtra }, 600);
    }

  });
  $(".close").click(function () {
      $('.description').slideUp();        
      $('body').animate({scrollTop: $('#port_img1').position().top }, 600);
  });
});

var scrollExtra繰り返しますが、別の値を指定することで正確なスクロール位置を変更できることに注意してください。

このコードの実装はこちらで、ライブ フルスクリーンの例はこちらで見つけることができます。

もう一度ウィンドウ サイズをいじってみて、実際にすべての画面サイズで動作することを確認してください。幸運を！

于 2013-07-09T14:14:36.343 に答える