5

次のようなマークアップがあります。

<li><a href="#sheds_housing">Sheds &amp; Housing</a></li>
<div id="sheds_housing">
    <h1>sheds &amp; housing</h1>
    <img src="images/cattle/sheds_housing.png" width="150" height="150" alt="Sheds & Housing"
        title="Sheds & Housing" />
    <p>Text here</p>
</div>

ページのセクションへのリンクを作成して、ユーザーがアンカーをクリックするとそのセクションに移動するようにします。

とにかく、ユーザーがそうするときに、リンクされた div の上のドキュメントの通常のフローに存在する可能性のある余分なコンテンツなしで、コンテンツが常に上部に表示されることを確認できますか?

CSS だけで実行できますか、それとも JS/jQuery を使用する必要がありますか? はいの場合、どのコードを使用しますか?

編集

以前はよくわかりませんでした。このFiddleを参照してください。最初の 2 つのリンクをクリックすると、それぞれのセクションに移動し、ウィンドウの上部にコンテンツが表示されますが、最後のリンクをクリックすると、それぞれのセクションに移動しますが、コンテンツは表示されません。ウィンドウの上部と、それぞれのセクションの上にあるコンテンツが表示されます。

4

12 に答える 12

4

ID「last_anchor」をリストの最後のリンクに追加すると、jquery でそれが実現されます。ボディバックの余白を変更する方法と変更する場合は、あなた次第です...

$(document).ready(function(){
  $("#last_anchor").click(function(){
    var content_id = $(this).attr("href");
    var win_height = $(window).height();
    var content_height = $(content_id).height();
    var target_margin = win_height - content_height;
    $("body").css("margin-bottom", target_margin)
  });
});​
于 2012-09-07T14:03:45.123 に答える
2

これが私がしたことです：

  1. ユーザーはページを下にスクロールします。
    異常なことは何も起こりません（ページに変更はありません）。

  2. ユーザーがアンカーをクリック/使用します。
    コードは、の後に空のスペースを作成する#contentため、画面の上部に目的の部分を配置できます。

  3. divユーザーはページを最初の内側までスクロールする#contentか（任意のポイントにすることができます）、戻るボタンを押してページの上部に移動します。
    空のスペースが消えます（ページが通常に戻ります）。

ここでオンラインテスト：http：//jsfiddle.net/RASG/z3q3s/

または、このコードをHTMLファイルとして保存して、PCでテストします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script>
    $(document).ready(function() {
        function isScrolledIntoView(elem){
            var docViewTop = $(window).scrollTop();
            var docViewBottom = docViewTop + $(window).height();

            var elemTop = $(elem).offset().top;
            var elemBottom = elemTop + $(elem).height();

            return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
        }

        var elem_that_hides_dummydiv = $('#content div:first');
        var elem_that_shows_dummydiv = $('#content div:last');
        $(window).scroll(function() {
            if (isScrolledIntoView(elem_that_hides_dummydiv)) { $('#dummydiv').hide() }
        });
        $('#gonnaclickhere').click(function() {
            $('#dummydiv').css({'height':(elem_that_shows_dummydiv.offset().top)+'px'}).show()
        })
    });
    </script>
</head>

<body>

<ul class="sub_navi">
    <li><a href="#sheds_housing">Sheds &amp; Housing</a></li>
    <li><a href="#feed_fodder">Feed &amp; Fodder</a></li>
    <li id="gonnaclickhere"><a href="#med_vac">Medication &amp; Vaccination</a></li>
</ul>

<div id="content">

    <div id="content_pic">
    <img src="images/cattle/cattle_main.jpg" width="400" height="300" alt="Cattle Main" title="Cattle Main" />
    </div>

    <p>Pak United Food Services Ltd., (PUFS) has earned a creditable name and become a major player in the animal husbandry market by building upon Pakistan&apos;s large livestock population. Introducing the concept of corporate cattle farming on scientific lines, the conglomerate uses a livestock development policy consisting of innovative strategies and action plans with the intention of bringing about a radical change in the current livestock production system. The cattle farms are established on rich and fertile acres of land and consist of an impressive and mixed herd of cows/buffalos and sheep/goats.</p>
    <p>A hybrid meat breed is developed by crossing the local indigenous breeds which are predominately draught/milch animals with high meat yielding animals from other parts of the world. A herd management system is incorporated to improve record keeping and obtain information for bench marking decisions. The farms employ a state of the art feedlot design involving the integration of the standard components into a fully functional operating system. This consists of housing, feeding, watering, health-care and cattle effluent &amp; manure management systems, making them well known across the country.</p>

    <div id="sheds_housing">
    <h1>sheds &amp; housing</h1>
    <img src="images/cattle/sheds_housing.png" width="150" height="150" alt="Sheds & Housing" title="Sheds & Housing" />
    <p>The housing for the animals utilizes a proper lay out for the farm buildings while keeping in view the environment, climate and wind direction. Sheds, pens and paddocks are constructed according to different categories and sex groups besides other infrastructure &amp; allied facilities. All buildings are made airy for the protection of the animals from extreme temperatures and strong winds. Adequate supply of water for drinking and cleaning is made necessary with strict maintenance of hygienic conditions. Ample sunlight and natural ventilation is assured to assist in the reduction of moisture and bacteria, offering a healthier, cleaner &amp; drier environment while also reducing the risk of disease and mortality in the livestock.</p>
    </div>

    <div id="feed_fodder">
    <h1>feed &amp; fodder</h1>
    <img src="images/cattle/feed_fodder.png" width="150" height="150" alt="Feed & Fodder" title="Feed & Fodder" />
    <p>The farms are equipped with in-house feed formulation capabilities which produce feed of constant quality and are palatable, nutritious and free from contamination. Feed supplies are made available according to different feed formulae while keeping in view the nutrient value and energy levels. Daily requirements are worked out for each category and class to achieve improved growth &amp; overall health. A restricted feeding regime is employed that is balanced &amp;amp; concentrated, containing minerals &amp; vitamins, leading to an improved feed/gain ratio. Fodder &amp; wheat/rice straws are purchased/contracted from the nearest markets, while treating it with ammonia or urea to improve the quality and gain a marked effect on cattle weight during the fattening period.</p>
    </div>

    <div id="med_vac">
    <div id="med_vac_title">
    <h1>medication &amp; vaccination</h1>
    </div>
    <img src="images/cattle/med_vac.png" width="150" height="150" alt="Medication & Vaccination" title="Medication & Vaccination" />
    <p>Regular vaccination of the whole herd against contagious and infectious diseases are carried out as a prophylactic measure in order to make sure that the animals are free of diseases of digestive, respiratory, urinary, gynecological and obstetrics by a designated veterinarian. A proactive health plan in employed to improve the health, welfare and productivity of the animals. A pre-weaning vaccination program is used with correct, effective and proper vaccines, dewormers, antibiotics and other medications to prime the immune systems of the animals. Furthermore post-weaning vaccination program is used to boost the immune system of the animals and increase the passive protection against common endemic livestock diseases.</p>
    </div>

</div>

<div id='dummydiv' style="bottom: 0; width: 100%;"></div>

</body>

</html>

FF13およびIE9でテスト済み。

于 2012-09-11T15:38:46.603 に答える
2

リンクされた div の上のドキュメントの通常のフローに存在する可能性のある余分なコンテンツなしで、コンテンツは常に上部に表示されます。

これは、ページ上のすべてのセクションを非表示にして、クリックされたリンクに対応するセクションのみを表示することを意味すると仮定すると、探しているものは Accordian と呼ばれます。ここでサンプルを見つけることができます.

于 2012-09-02T17:27:02.673 に答える
2

あなたの問題に対処するための私の最初の解決策は、上記の@saurabhのものに似ています:

http://jsfiddle.net/Cgx3h/

$('.sub_navi a').click(function() {
    var theID = $(this).attr('href');
    $(theID+':last-child').css('min-height', $(window).height());
})

あなたがjQueryを使用することになった場合、他に考慮すべきことは、フォーカスされたコンテンツを強調表示し、残りを薄暗くすることです...

http://jsfiddle.net/hZGwA/

$('.sub_navi a').click(function() {
    $('#content div').css('opacity',0.5);
    var theID = $(this).attr('href');
    $(theID).css('opacity', 1);
})

</p>

于 2012-09-10T14:51:30.007 に答える
2

問題は、(私の理解が正しければ!) ページの終わりに到達していることです。最後の要素のマージンを拡張するか、コンテンツを追加すると、ヘッダーが上部に表示されます (表示するページが十分に残っている場合)。

フィドルを参照してください: http://jsfiddle.net/tHXsS/

于 2012-09-02T18:05:31.563 に答える
2

解決策: http://jsfiddle.net/AdKy9/2/

これをコードに追加します。

<!-- 
  padding div tag goes AFTER #med_vac
  but BEFORE closing tag of #content
-->
<div id="lowerPadding"></div>

<!-- script tag goes in <head> -->

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">

  $(document).ready(function() {
    $("a").click(function() {
      var targ = $(this).attr('href');
      var elem = $(targ);
      document.location.href= targ;
      assureAtTop(elem);
      document.location.href= targ;
    });
  });


  function assureAtTop(inObj) {
    var y = $(inObj).height();
    var z = $("#lowerPadding").height();
    var w = $(window).height();
    while (y+z < w) {
      $("#lowerPadding").append("<br/>");
      z = $("#lowerPadding").height();
    }
  }

</script>
  • <a>要素をクリックすると、その場所に移動します。
  • ターゲット位置、パディング タグ、およびウィンドウの高さを取得します。

  • <br/>ターゲット位置がウィンドウの上部になるまで、パディング タグにタグを追加します

    注:<a>ウィンドウの垂直方向の高さおよび/または水平方向の幅が大きい場合、2 番目または 3 番目のターゲット位置にパディングが必要になる可能性があるため、すべてのタグをチェックします。これは jQuery なしで実装することもできますが、jQuery を使用する方が簡単でクロスブラウザーです。

于 2012-09-08T21:26:16.607 に答える
1

これは、よりクロスブラウザーで JavaScript を使用しないソリューションです。

ただし、絶対配置を使用できることを意味するため、フロートなどにはあまり適していません。

#med_vac {
    position: absolute;    
    height: 100%;
}

このソリューションのデモを行うフィドルのフォーク:

http://jsfiddle.net/fFL7x/

于 2012-09-11T08:18:01.727 に答える
1

divナビゲーション全体に CSS を適用できるように、ナビゲーションを別のナビゲーションでラップする必要があります。それが完了したら、ヘッダーを固定に配置できます。次のステップは、ページのコンテンツをいくらか下に移動して (ナビゲーションの高さ)、ページの上部に定数ヘッダー用のスペースを作ることです。これを行うには、すべてのコンテンツを別のコンテンツでラップしますdiv(このコンテンツ div にナビゲーションを含めないでください) 。いくつかのCSSを適用します-margin-top: (height of nav);

#topnav
{
    position: fixed;
}

#content
{
    margin-top: (height of nav);
}

編集：

ああ、私はあなたが望むものを見ます。これを達成するには、 の高さを設定するか、アンカーに移動するときにすべてのダイビングでその方法をdiv使用して、ブラウザが下にスクロールできるようにします。min-height

したがって、CSS で要素または項目として新しいクラスを定義し、それぞれの にクラスを追加する必要がありますdiv。

CSS 

.elementItem
{
    //use height or min height
}

HTML

<div id="sheds" class="elementId">
    Content
</div>

JSFiddle を参照してください: http://jsfiddle.net/dKfVL/

于 2012-09-02T17:26:54.090 に答える
1

このフィドルを試してください：http://jsfiddle.net/dKfVL/9/

これが css だけで可能かどうかはわかりません (少なくともクロスブラウザーではありません)。

jQuery を使用して、#med_vac 要素に十分な高さを確保し、タイトルがページの上部に表示されるようにしました。ウィンドウのサイズが変更されたときにコードを実行するように設定したので、画面サイズの変更にも応答します。

お役に立てれば！

于 2012-09-05T13:22:38.423 に答える
1

より良いもの (パディング div は必要ありません!)

この jsfiddleで試してください。それは私にとって完璧に機能しています。

Highlights of this fiddle:

  1. パディング div は不要
  2. 最後のリンクがクリックされた場合にのみ、最後のラッパー div の高さを変更する

以下のコード。

$(document).ready(function(){
  //apply height change while clicking on last link only
  $("ul.sub_navi li a:last").click(function(){
    var $targ= $($(this).attr("href"));
    if($targ.height() < $(window).height()){
      $targ.css('min-height', $(window).height())
    }
  });
});​
于 2012-09-10T16:12:59.113 に答える
1

クリックされたターゲットが一番上に移動するようにセクションが再編成されても構わない場合は、これでうまくいく可能性がありますhttp://jsfiddle.net/robx/dKfVL/34/

選択したセクションが最初の「牛」のすぐ下に配置されるようにしました。それが何であるかはわかりませんが、そのままの場所にとどまることを意図しているようです。

ここに表示される唯一の実行可能なオプションは次のとおりです。

  1. それらをすべて非表示にして、クリックされたもののみを表示します (アコーディオンまたはタブ スタイル)。
  2. 選択したセクションが上に移動し、残りを押し下げるように、クローン、追加、および削除によって再編成します。
  3. 常にそこにある醜い大きなマージンを下に置きます（私にとっては望ましくありません）。
これがあなたをより良い方向に向けるのに役立つことを願っています.

于 2012-09-11T04:19:57.313 に答える
1

最初に私のソリューションをチェックアウトしてください: http://jsfiddle.net/dKfVL/4/

上記のソリューションは JavaScript を使用しており、リンクがクリックされたときにのみdiv必要な高さを動的に追加します。

var fixLink = $(".sub_navi li:last a"); // change this to a/c to your requirement

fixLink.click(function(){
    var targetDiv = fixLink.attr("href"); //get the ID of div to be fixed
    $(targetDiv).height($(window).height());
});

これは後で高さを削除しません。そうする理由がわかりません。しかし、本当にそれをしたい場合は、スクロールがビューポートの高さよりも大きい場合、ブラウザーのスクロール イベントを監視してから、ターゲット div の高さを に設定できますauto。

オプション 2:
JavaScript を使用したくない場合は、css のvhユニットを使用できます。これは css のユニットと非常によく似て%いますが、ビュー ポートに相対的であり、現在はクロムでのみ機能するという違いがあります。

CSS : 

#med_vac {
  height: 100vh;
}

jsfiddle: http://jsfiddle.net/dKfVL/5/
注: これはクロスブラウザーではありません

于 2012-09-05T10:01:45.057 に答える