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

您应该offset使用 jQuery 的.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;

我在这里为您准备了一个工作示例。

为了证明它确实有效，您可以在此处使用窗口大小。

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

更新

要将其实施到您的示例中，我们必须确定滚动到的位置。

出于说明目的，我选择使用 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不同的值来更改确切的滚动位置。

您可以在此处找到此代码的实现，并在此处找到实时全屏示例。

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

于 2013-07-09T14:14:36.343 回答
0

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

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


  else{
        var offSet = 600;}

然后在您的代码中替换它：

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

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

于 2013-07-09T13:53:10.110 回答