Как управлять ссылкой #id на странице?

ProgramBox

Как управлять ссылкой #id на странице?

Post author:admin
Запись опубликована:29 августа, 2022
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Эта СКРИПКА объяснит больше, чем мои слова

Как избежать скрытого заголовка при нажатии на идентификатор ссылки 2, идентификатор ссылки 3 и идентификатор ссылки 4?

PS: Пожалуйста, если у кого-нибудь есть лучшее название для этого вопроса, пожалуйста, помогите, мой английский не так хорош!

 <header id="header">
   header
</header>

<div class="catalog">
    <div class="col1">
       <ul>
           <li><a href="#id1">Link id 1</a></li>
           <li><a href="#id2">Link id 2</a></li>
           <li><a href="#id3">Link id 3</a></li>
           <li><a href="#id4">Link id 4</a></li>
           <li><a href="#id5">Link id 5</a></li>

       </ul>
    </div>
    <div class="col_alternativ"></div>
    <div class="col2">
        <div id="id1" class="item">
            <h2>Link id 1</h2>            
        </div>
        <div id="id2" class="item">
            <h2>Link id 2</h2>            
        </div>
        <div id="id3" class="item">
            <h2>Link id 3</h2>            
        </div>
        <div id="id4" class="item">
            <h2>Link id 4</h2>            
        </div>
        <div id="id5" class="item">
            <h2>Link id 5</h2>            
        </div>
    </div>
</div>


$(window).scroll(function() {    
                var newValue = {opacity : 100}
                var scroll = $(window).scrollTop();
                if (scroll >= 100) {
                    $("#header").addClass("stablemenu").animate(newValue, 1000);
                    $(".col1").addClass("stable_col1").animate(newValue, 1000);
                    $(".col_alternativ").css({"display":"inline-block"});
                } else {
                    $("#header").removeClass("stablemenu");
                    $(".col1").removeClass("stable_col1").animate(newValue, 1000);
                    $(".col_alternativ").css({"display":"none"});
                }
            });

1. Вы пробовали вызывать id на H2 ?

2. да, я пытался вызвать H2… не повезло

3. Самый простой способ — в верхней части каждого .item 100px, чтобы учесть высоту заголовка.

4. @Blazemonger Я думаю, вы говорите об этом варианте: jsfiddle.net/tdz3H/3 это я сделал, как решение проблемы. Однако это выглядит немного непрофессионально… Я добавил АБСОЛЮТНУЮ позицию div внутри каждого .item и присвоил ей значение — 100 пикселей сверху…

5. Есть еще немного CSS, чтобы это выглядело хорошо, правда. Но очевидно, что ваша скрипка не похожа на ваш конечный сайт, поэтому я предоставил вам решить, как ее настроить. Также существуют решения на JavaScript, но я думаю padding-top:100px; , что исправление в конечном итоге самое простое.

Ответ №1:

Я смог сделать то, что вы хотели… Я думаю. Смотрите здесь: http://jsfiddle.net/wilsonjonash/tdz3H/8 /

Редактировать: вот код

 <header id="header">
   header
</header>

<div class="catalog">
    <div class="col1">
       <ul>
           <li><a href="#id1">Link id 1</a></li>
           <li><a href="#id2">Link id 2</a></li>
           <li><a href="#id3">Link id 3</a></li>
           <li><a href="#id4">Link id 4</a></li>
           <li><a href="#id5">Link id 5</a></li>

       </ul>
    </div>
    <div class="col_alternativ"></div>
    <div class="col2">
        <div class="item">
            <div id="id1" class="hederid"></div>
            <h2>Link id 1</h2>            
        </div>
        <div class="item">
            <div id="id2" class="hederid"></div>
            <h2>Link id 2</h2>            
        </div>
        <div class="item">
            <div id="id3" class="hederid"></div>
            <h2 id="id3">Link id 3</h2>            
        </div>
        <div class="item">
            <div id="id4" class="hederid"></div>
            <h2>Link id 4</h2>            
        </div>
        <div class="item">
            <div id="id5" class="hederid"></div>
            <h2>Link id 5</h2>            
        </div>
    </div>
</div>

CSS:

 #header {
    width: 100%;
    height: 100px;
    background-color: red;
}
.stablemenu {
    position: fixed;
    top: 0px;
    left:0px;
    z-index: 2;
    background-color: yellow !important;
}
.catalog {
    display: block;
    width: 100%;
    margin-top: 40px;
}
.catalog .col1 {
    display: inline-block;
    border: 1px solid #ccc;
    width: 25%;
    height: auto;
    padding: 1%;
    margin-right: 1%;
}
.catalog .col_alternativ {
    border: 1px solid #fff;
    width: 25%;
    height: auto;
    padding: 1%;
    margin-right: 1%;
    display: none;
}
.stable_col1 {
    position: fixed;
    top: 140px;
    left: 0px;
}
.catalog .col2 {
    display: inline-block;
    width: 70%;
    height: auto;
    vertical-align: top;
}
.item {
    border: 1px solid #ccc;
    width: auto;
    height: 300px;
    margin-bottom: 40px;
    position: relative;
}
.item .hederid {
    position: absolute;
    background: #ccc;
    width: 20px;
    height: 20px;
    left: 0px;
    top: -140px;
}

JavaScript:

 $(window).scroll(function() {    
    var newValue = {opacity : 100}
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $("#header").addClass("stablemenu").animate(newValue, 1000);
        $(".col1").addClass("stable_col1").animate(newValue, 1000);
        $(".col_alternativ").css({"display":"inline-block"});
        $('.col2').css('margin-top','100px');
        //$("#topbar").show().animate(newValue, 1000);
    } else {
        $("#header").removeClass("stablemenu");
        $(".col1").removeClass("stable_col1").animate(newValue, 1000);
        $(".col_alternativ").css({"display":"none"});
        $('.col2').css('margin-top','0');
    }
});

1. Действительно? Для меня отлично смотрится в Chrome.

2. Ах, хорошо, я понимаю, что ты имеешь в виду.

3. Извините. Если подумать, я не думаю, что смогу сделать то, о чем вы просите. Я не уверен, что то, что вы хотите, возможно в текущем HTML / CSS. Bootstrap отображает фиксированный заголовок в виде документированного шаблона, но даже их фиксированный заголовок перекрывает целевые привязки: jsfiddle.net/wilsonjonash/945cy/1

4. Я предположил, что вы могли бы использовать <iframe></iframe> , если вам действительно нужно такое поведение. Конечно, тогда у вас возникает проблема с присвоением iframe фиксированной высоты; это будет выглядеть слишком большим на одних экранах, слишком большим на других. Удачи в поиске решения.

5. Спасибо за вашу попытку, может быть, вы сможете мне помочь с этим: jsfiddle.net/tdz3H/3 это мое решение, однако оно работает только после 2-го клика (даже по той же ссылке) ну, как заставить его работать даже после 1-го клика? Есть идеи?

Метки: Как управлять ссылкой #id на странице?