Question

你们已经帮了我很多，希望你能帮我解决这个问题。

到目前为止，这是我的网站：http://stilld.nl/test/

一切都工作得很好（虽然需要在我的代码中做很多整理）。

请向下滚动到投资组合部分。单击项目，详细信息将显示在投资组合下方。完善！

问题：浏览器缩小到移动格式的大小。单击项目组合项。它不会向下滚动得太远，因为我的投资组合项目现在显示在彼此之下。他们现在占用了更多的垂直空间！

我想要什么：有没有办法让代码响应？如下所示：如果屏幕尺寸小于600 px那么在点击时向下滑动500px。

这是我现在正在使用的代码：

$(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);
});

}）;

Answer 1

您应该使用jQuery的.offset()或jQuery的.position()来计算offset。

你可以做的例如是：

$(".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。

要证明它确实有效，您可以使用窗口大小here。

我希望能回答你的问题。祝你好运！

更新

要在您的示例中实现它，我们必须确定滚动到的位置。

出于说明目的，我选择在此示例中使用div #alldescriptions和#port_img1执行此操作。

您网站的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提供不同的值来更改确切的滚动位置。

您可以找到此代码here的实现和实时全屏示例here。

请再次使用窗口大小，以便您可以看到它实际上适用于每个屏幕大小。祝你好运！

Answer 2

您可以检测屏幕的内部宽度，然后为偏移量设置变量。

if(window.innerWidth <= 600) {
    var offSet = 500;}


  else{
        var offSet = 600;}

然后在代码中替换它：

$('html, body').animate({scrollTop: $('#targetWrapper').offset().top + 50 }, offSet);

但是......如果你想简化你的代码，可以使用CSS Transitions。然后使用jQuery添加和删除触发Transition的类，使用媒体查询来更改偏移量。它的开销也会减少。

响应滑动点击

2 个答案:

更新