如何更改此jquery脚本，使其显示在加载而不是滚动

Question

我在这个网站上工作。 www.runebs.dk。

我使用此脚本触发每个项目的信息。

JS ..

$('.showHide').on('click',function(){
    $(this).toggleClass('active');
    $( '#subHeadline .description' ).slideToggle(200);
    var currentState = $(this).text();
    console.log('state: ', currentState);
    if($(this).hasClass('active')) {
        $('.showHide').empty();
        $(this).text('(+)');
    } else {
        $(this).text('(–)');
    }
});
}

$(document).ready(function(){
    // firing toggleInfo when doc ready
    toggleInfo();
    var $window = $(window);
    $window.trigger('scroll'); // init the value
    $window.on('scroll', function(){

        var pos = $('#subHeadline').offset();
        $('.article-header').each(function(){
            if (pos.top <= $(this).offset().top && pos.top >= $(this).next().offset().top) {
                var desc = $('.description', this).text();
                var title = $('.h3', this).text();
                var year = $('.year', this).text();
                var button = $('.showHide', this).text();
                $('#subHeadline .title').text(title);
                $('#subHeadline .year').text(year);
                $('#subHeadline .description').text(desc);
                $('#subHeadline .showHide').show();
                return;
            }
        });
    });

CSS ..

.article-header {
    display: none;
}
#subHeadline {
    display:none;
    position:fixed;
    top:0px;
    left: 0;
    margin-left: 22px;
    padding-top: 64px;
    height: auto;
    width: 600px;
    z-index:1;
}
#subHeadline .description {
    display: none;
    width: 280px;
    position: relative;
    margin-top: 28px;
}
#subHeadline .showHide {
    display: none;
    width: 280px;
    position: relative;
    margin-top: 28px;
    cursor: pointer;
}
.year {
    display: block;
    margin-top: -19px;
}

这个脚本工作得很完美，我想要做的唯一一点改变就是当你进入网站时显示有关第一个项目的信息，而不是现在你必须滚动的地方。

我希望有人可以帮助我。非常感谢..

Answer 1

请参考以下代码：

$window.ready(function() {
      code here
    });

Answer 2

我想你想要这样的东西

在这里查看小提琴Full Screen

Js fiddle

Jquery的

    $(window).load(function(){

          var target = $("#section3") // this should be the target where to scroll
          $target = $(target);

          $('html, body').stop().animate({
            'scrollTop': $target.offset().top
            }, 1000);


    })

修改

根据你的评论，我对你的js做了一些改变，这应该有效

• 页面js的onload检查第一个孩子并给出标题desc等

• onscroll如果滚动到达其他帖子，它将采用其标题desc等

  $(document).ready(function() {
  
  // firing toggleInfo when doc ready
  toggleInfo();
  
  var value = $(".article-header:first")
  
  var desc = $('.description', value).text();
  var title = $('.h3', value).text();
  var year = $('.year', value).text();
  var button = $('.showHide', value).text();
  $('#subHeadline .title').text(title);
  $('#subHeadline .year').text(year);
  $('#subHeadline .description').text(desc);
  $('#subHeadline .showHide').show();
  return;
  
  
  
  });
  
  var $window = $(window);
  
  $window.trigger('scroll'); // init the value
  
  $window.on('scroll', function() {
  
  
  var pos = $('#subHeadline').offset();
  
  $('.article-header').each(function() {
      if (pos.top <= $(this).offset().top && pos.top >= $(this).next().offset().top) {
          var desc = $('.description', this).text();
          var title = $('.h3', this).text();
          var year = $('.year', this).text();
          var button = $('.showHide', this).text();
          $('#subHeadline .title').text(title);
          $('#subHeadline .year').text(year);
          $('#subHeadline .description').text(desc);
          $('#subHeadline .showHide').show();
          return;
      }
  
  });