Question

Я пытаюсь создать навигационную ссылку, которая будет переходить к указанному разделу на странице при клике.

Проблема в том, что когда щелкает навигационная ссылка (скажем, день 1), она переходит на Раздел 1-го дня, как и ожидалось, но вместо этого прикрыть некоторое содержимое.

Я хочу достичь

Страница должна перейти к необходимому разделу.
Содержимое (то есть День 0 (Дата) должен находиться под панелью навигации с небольшим промежутком между навигацией и элементом с классом содержимого, например , этот снимок экрана (я пытался установить margin-top, но это не не решить проблему)

Примечание: мой код не очень хорошо оформлен (стилизован)

Вот мой код ::

TIA.

Elman Huseynov · Answer 1 · 06 апреля 2020

Вот пример моего решения. Отметьте JS, я добавил переменную count_to_scroll_up, чтобы изменить количество пикселей, что поможет не покрыть некоторую часть содержимого;

<script
              src="https://code.jquery.com/jquery-3.4.1.min.js"
              integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous"></script>

              <script>
              	//get element and output last modified date
      let lastModDate = document.lastModified;
      let lastModOut = document.getElementById("lastMod").innerHTML = "Page Last updated on: " + lastModDate;
    </script>

    <script>


        $(function(){

        	var count_to_scroll_up = 75;

            $("#sticky-nav a").on('click', function(e){
            	e.preventDefault();
            	var current_id = $(this).attr('href');
            	console.log(current_id);
            	$([document.documentElement, document.body]).animate({
			        scrollTop: $(current_id).offset().top - count_to_scroll_up
			    }, 2000);
            })

        });
    </script>

#intro{
    min-height:100px;
    background-color: skyblue;
    padding: 20px;
    display: block;
    text-align: justify;
    }
    h1{
        margin-top:0px;
        text-transform: uppercase;
        text-align:center;
        color: tomato;
        font-weight: bolder; 
        }
#sticky-nav{
    min-height: 20px;
    width:100%;
    display: block;
    border-bottom: 5px solid tomato;
    position: sticky; top:0px;
    z-index:99999;
    background-color: skyblue;
    overflow: auto;
    white-space: nowrap;
    }
    #sticky-nav > a{
    display: inline-block;
    font-weight:bolder;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0px ;
    padding: 12px 25px;
    color: tomato;
    font-weight: bold;
    border-left: 1px solid tomato;
    font-size:18px;
    }
    #sticky-nav > a:hover{
        background-color: tomato;
        color: skyblue;
        font-weight: bolder;
        font-size:20px;
        }

#wrapper{
    padding:15px;
    
    min-height:100px;
    width:95%;
    margin:0 auto;
    background-color:lightblue;
}
fieldset{
    border: 2px solid black;
    margin: 60px auto 25px auto;
    padding: 10px 20px;
}
legend{
    color: dodgerblue;
    font-weight:bolder;
}
    
.content-box {
    border:2px solid gray;
    margin:10px auto 25px auto;
    box-shadow: 2px 2px 8px 0px gray;
}
.rem-box{
    border:2px dashed dodgerblue;
}

.content-head{
    border-bottom:2px solid tomato;
    background-color: skyblue;
    width:100%;
    color: tomato;
    padding: 5px 0px;
    font-weight: bolder;
}
h2{
    margin: 0;
    text-align:center ;
}


.content-body{
    background-color: dodgerblue;
    min-height:100px;
    width:100%;
    color:white;
    padding: 5px 10px;
    text-align: left;
}
.content-body > ul, .content-body > li{
    margin:0;
    border: 0px solid red;
    padding: 0px;
    }
    .content-body > ul{
    padding: 5px 5px 5px 15px ;
    }
    li{
        margin-bottom: 8px;
        }
        .rem-box  h2{
            color: dodgerblue;
            }
        .rem-box  div{
            color: green; 
            background-color: transparent;
            }
            hr{
                border: 2px solid dodgerblue;
                }


#ftop{
    background-color:lightgray;
    min-height:60px;
    background-color: #ccc;
        padding: 20px;
        width: 100%;
    text-align: center;
}

#ftop h3{
                color: dodgerblue;
                font-size :25px;
                margin-top:0;
                text-transform: uppercase;
                }

#ftop hr{
                border: 2px solid tomato;
                }
        #ftop a{
                text-decoration:none;
                color:gray;
                display:inline-block;
                font-weight:bolder;
                border: 0px solid red;
                margin:0 auto;
                padding: 10px;
                }
    #ftop a:hover{
        color: dodgerblue;
        border-bottom: 2px solid dodgerblue;
        }
        

footer{
    text-align:center ;
    background-color: dodgerblue;
    min-height:40px;
    padding: 30px 20px;
    color:white;
    font-style:italic ; 
}
    small{
                font-family: monotype;
                 }
                .social-btn{
                    display: inline-block;
                    margin-right: 5px;
                    
                    }
#ftop a.whatsapp:hover{
        color: green;
        border-bottom: 2px solid green;
        }
#ftop a.email:hover{
        color: tomato;
        border-bottom: 2px solid tomato;
        }
#ftop a.twitter:hover{
        color: #00BCFF;
        border-bottom: 2px solid skyblue;
        }

<section id="intro">
      <!-- About Me section -->
      <h1>Simple Coding Progress Tracker </h1>
      <p><b style="color: dodgerblue; font-weight: bolder;"><em> Hi, thanks for stopping by today </em> <i class="fa fa-smile-o" style="font-size:25px"></i></b>
        <br /> I'm KINGSLEY WILLIAM (@KeleosWilliam on Social Networks), a tech enthusiast who is aspiring to become a professional Web and Mobile App Developer.</p>
      <p>As a way to keep myself motivated and committed to continued learning, I have created this simple page to help me track and monitor my coding progress on a daily basis, even as I start the <b> #100DaysofCode </b> challenge.</p>
      <p>I'll do my best to update this page everyday between <em> 23:30 and 01:30 Hours GMT+1 </em>. </p>
    </section>
  </header>
  <nav id="sticky-nav">
    <a href="#day0">Day 0 </a>
    <a href="#day1">Day 1 </a>
    <a href="#day2">Day 2 </a>
    <a href="#day3">Day 3 </a>
    <a href="#day4">Day 4 </a>
    <a href="#day5">Day 5 </a>
    <a href="#day6_7">Day 6 & 7 </a>
  </nav>

  <main>
    <section id="wrapper">

      <!-- DAY 0  BELOW -->
      <fieldset class="fieldset_day" id="day0">
        <legend>
          Day 0 (4th April, 2020)
        </legend>
        <article class="content-box">
          <header class="content-head">
            <h2>What I've learnt today</h2>
          </header>
          <div class="content-body">

          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>What I'll learn more about</h2>
          </header>
          <div class="content-body">
            <!--          
              https://scratch.mit.edu/projects/345188715
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>Remarks/Comments</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== 
                      ===================== -->
        <article class="content-box rem-box">
          <header class="content-head">
            <h2>Learning Resources:</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
      </fieldset>

      <!-- DAY 1  BELOW -->
      <fieldset class="fieldset_day" id="day1">
        <legend>
          Day 1 (4th April, 2020)
        </legend>
        <article class="content-box">
          <header class="content-head">
            <h2>What I've learnt today</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>What I'll learn more about</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>Remarks/Comments</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== 
                      ===================== -->
        <article class="content-box rem-box">
          <header class="content-head">
            <h2>Learning Resources:</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
      </fieldset>
	  

	        <!-- DAY 0  BELOW -->
      <fieldset class="fieldset_day" id="day2">
        <legend>
          Day 0 (4th April, 2020)
        </legend>
        <article class="content-box">
          <header class="content-head">
            <h2>What I've learnt today</h2>
          </header>
          <div class="content-body">

          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>What I'll learn more about</h2>
          </header>
          <div class="content-body">
            <!--          
              https://scratch.mit.edu/projects/345188715
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>Remarks/Comments</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== 
                      ===================== -->
        <article class="content-box rem-box">
          <header class="content-head">
            <h2>Learning Resources:</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
      </fieldset>

             <!-- DAY 0  BELOW -->
      <fieldset class="fieldset_day" id="day3">
        <legend>
          Day 0 (4th April, 2020)
        </legend>
        <article class="content-box">
          <header class="content-head">
            <h2>What I've learnt today</h2>
          </header>
          <div class="content-body">

          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>What I'll learn more about</h2>
          </header>
          <div class="content-body">
            <!--          
              https://scratch.mit.edu/projects/345188715
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>Remarks/Comments</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== 
                      ===================== -->
        <article class="content-box rem-box">
          <header class="content-head">
            <h2>Learning Resources:</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
      </fieldset>


                <!-- DAY 0  BELOW -->
      <fieldset class="fieldset_day" id="day4">
        <legend>
          Day 0 (4th April, 2020)
        </legend>
        <article class="content-box">
          <header class="content-head">
            <h2>What I've learnt today</h2>
          </header>
          <div class="content-body">

          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>What I'll learn more about</h2>
          </header>
          <div class="content-body">
            <!--          
              https://scratch.mit.edu/projects/345188715
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>Remarks/Comments</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== 
                      ===================== -->
        <article class="content-box rem-box">
          <header class="content-head">
            <h2>Learning Resources:</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
      </fieldset>


                <!-- DAY 0  BELOW -->
      <fieldset class="fieldset_day" id="day5">
        <legend>
          Day 0 (4th April, 2020)
        </legend>
        <article class="content-box">
          <header class="content-head">
            <h2>What I've learnt today</h2>
          </header>
          <div class="content-body">

          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>What I'll learn more about</h2>
          </header>
          <div class="content-body">
            <!--          
              https://scratch.mit.edu/projects/345188715
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>Remarks/Comments</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== 
                      ===================== -->
        <article class="content-box rem-box">
          <header class="content-head">
            <h2>Learning Resources:</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
      </fieldset>


                <!-- DAY 0  BELOW -->
      <fieldset class="fieldset_day" id="day6">
        <legend>
          Day 0 (4th April, 2020)
        </legend>
        <article class="content-box">
          <header class="content-head">
            <h2>What I've learnt today</h2>
          </header>
          <div class="content-body">

          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>What I'll learn more about</h2>
          </header>
          <div class="content-body">
            <!--          
              https://scratch.mit.edu/projects/345188715
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== -->
        <article class="content-box">
          <header class="content-head">
            <h2>Remarks/Comments</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
        <!-- ===================== 
                      ===================== -->
        <article class="content-box rem-box">
          <header class="content-head">
            <h2>Learning Resources:</h2>
          </header>
          <div class="content-body">
            <!--          
                        <ul>
                            <li> </li>
                        </ul> 
                -->
          </div>
        </article>
      </fieldset>









    </section>

HTML NAV. позиционирование с использованием CSS перекрывающегося содержимого

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

HTML NAV. позиционирование с использованием CSS перекрывающегося содержимого

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы